fix scroll bars in modals (#34)

franciscoBSalgueiro · Oct 8, 2023 · fabdb63 · fabdb63
1 parent 9f49c15
commit fabdb63
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 71 deletions.
diff --git a/src/components/databases/AddDatabase.tsx b/src/components/databases/AddDatabase.tsx
@@ -94,7 +94,6 @@ function AddDatabase({
       opened={opened}
       onClose={() => setOpened(false)}
       title="Add Database"
-      scrollAreaComponent={ScrollArea.Autosize}
     >
       <Tabs defaultValue="web">
         <Tabs.List>
@@ -107,27 +106,29 @@ function AddDatabase({
               <Loader />
             </Center>
           )}
-          <Stack>
-            {defaultDatabases &&
-              defaultDatabases.map((db, i) => (
-                <DatabaseCard
-                  database={db}
-                  databaseId={i}
-                  key={i}
-                  setDatabases={setDatabases}
-                  initInstalled={databases.some((e) => e.title === db.title)}
-                />
-              ))}
-            {error && (
-              <Alert
-                icon={<IconAlertCircle size="1rem" />}
-                title="Error"
-                color="red"
-              >
-                {"Failed to fetch the database's info from the server."}
-              </Alert>
-            )}
-          </Stack>
+          <ScrollArea.Autosize h={500} offsetScrollbars>
+            <Stack>
+              {defaultDatabases &&
+                defaultDatabases.map((db, i) => (
+                  <DatabaseCard
+                    database={db}
+                    databaseId={i}
+                    key={i}
+                    setDatabases={setDatabases}
+                    initInstalled={databases.some((e) => e.title === db.title)}
+                  />
+                ))}
+              {error && (
+                <Alert
+                  icon={<IconAlertCircle size="1rem" />}
+                  title="Error"
+                  color="red"
+                >
+                  {"Failed to fetch the database's info from the server."}
+                </Alert>
+              )}
+            </Stack>
+          </ScrollArea.Autosize>
         </Tabs.Panel>
         <Tabs.Panel value="local" pt="xs">
           <form

diff --git a/src/components/engines/AddEngine.tsx b/src/components/engines/AddEngine.tsx
@@ -87,12 +87,7 @@ function AddEngine({
   });
 
   return (
-    <Modal
-      opened={opened}
-      onClose={() => setOpened(false)}
-      title="Add Engine"
-      scrollAreaComponent={ScrollArea.Autosize}
-    >
+    <Modal opened={opened} onClose={() => setOpened(false)} title="Add Engine">
       <Tabs defaultValue="web">
         <Tabs.List>
           <Tabs.Tab value="web">Web</Tabs.Tab>
@@ -104,27 +99,29 @@ function AddEngine({
               <Loader />
             </Center>
           )}
-          <Stack>
-            {defaultEngines &&
-              defaultEngines.map((engine, i) => (
-                <EngineCard
-                  engine={engine}
-                  engineId={i}
-                  key={i}
-                  setEngines={setEngines}
-                  initInstalled={engines.some((e) => e.name === engine.name)}
-                />
-              ))}
-            {error && (
-              <Alert
-                icon={<IconAlertCircle size="1rem" />}
-                title="Error"
-                color="red"
-              >
-                {"Failed to fetch the engine's info from the server."}
-              </Alert>
-            )}
-          </Stack>
+          <ScrollArea.Autosize mah={500} offsetScrollbars>
+            <Stack>
+              {defaultEngines &&
+                defaultEngines.map((engine, i) => (
+                  <EngineCard
+                    engine={engine}
+                    engineId={i}
+                    key={i}
+                    setEngines={setEngines}
+                    initInstalled={engines.some((e) => e.name === engine.name)}
+                  />
+                ))}
+              {error && (
+                <Alert
+                  icon={<IconAlertCircle size="1rem" />}
+                  title="Error"
+                  color="red"
+                >
+                  {"Failed to fetch the engine's info from the server."}
+                </Alert>
+              )}
+            </Stack>
+          </ScrollArea.Autosize>
         </Tabs.Panel>
         <Tabs.Panel value="local" pt="xs">
           <EngineForm

diff --git a/src/components/engines/EditEngine.tsx b/src/components/engines/EditEngine.tsx
@@ -37,7 +37,6 @@ export default function EditEngine({
       opened={opened}
       onClose={() => setOpened(false)}
       title="Edit Engine"
-      scrollAreaComponent={ScrollArea.Autosize}
     >
       <EngineForm
         submitLabel="Save"

diff --git a/src/components/puzzles/AddPuzzle.tsx b/src/components/puzzles/AddPuzzle.tsx
@@ -66,28 +66,29 @@ function AddPuzzle({
       opened={opened}
       onClose={() => setOpened(false)}
       title="Add Database"
-      scrollAreaComponent={ScrollArea.Autosize}
     >
-      <Stack>
-        {defaultdatabases.map((db, i) => (
-          <PuzzleDbCard
-            puzzleDb={db}
-            databaseId={i}
-            key={i}
-            setPuzzleDbs={setPuzzleDbs}
-            initInstalled={puzzleDbs.some((e) => e.title === db.title)}
-          />
-        ))}
-        {error && (
-          <Alert
-            icon={<IconAlertCircle size="1rem" />}
-            title="Error"
-            color="red"
-          >
-            {"Failed to fetch the database's info from the server."}
-          </Alert>
-        )}
-      </Stack>
+      <ScrollArea.Autosize mah={500} offsetScrollbars>
+        <Stack>
+          {defaultdatabases.map((db, i) => (
+            <PuzzleDbCard
+              puzzleDb={db}
+              databaseId={i}
+              key={i}
+              setPuzzleDbs={setPuzzleDbs}
+              initInstalled={puzzleDbs.some((e) => e.title === db.title)}
+            />
+          ))}
+          {error && (
+            <Alert
+              icon={<IconAlertCircle size="1rem" />}
+              title="Error"
+              color="red"
+            >
+              {"Failed to fetch the database's info from the server."}
+            </Alert>
+          )}
+        </Stack>
+      </ScrollArea.Autosize>
     </Modal>
   );
 }