feat: 💄 add scrollbar to preview pane

src/Organizrr.tsx

@@ -520,38 +520,42 @@ function Organizrr() {
         </AppShell.Main>
 
         <AppShell.Aside p="md" bg="var(--mantine-primary-color-0)">
-          <Stack align="center">
+          <AppShell.Section>
             <Group style={{ alignSelf: "start" }}>
               <IconEye /> <Title order={3}>Preview</Title>
             </Group>
-            <Select
+          </AppShell.Section>
-              label="Select file"
+          <AppShell.Section grow my="md" component={ScrollArea}>
-              data={form.values.documents.map(({ id, file }) => ({
+            <Stack align="center">
-                value: id,
+              <Select
-                label: file.name,
+                label="Select file"
-              }))}
+                data={form.values.documents.map(({ id, file }) => ({
-              value={activeDocumentId}
+                  value: id,
-              onChange={setActiveDocumentId}
+                  label: file.name,
-            />
+                }))}
-            {activeDocument &&
+                value={activeDocumentId}
-              activeDocument.file.name.toLowerCase().endsWith(".pdf") && (
+                onChange={setActiveDocumentId}
-                <>
+              />
-                  <ScrollArea maw="100%">
+              {activeDocument &&
-                    <Document
+                activeDocument.file.name.toLowerCase().endsWith(".pdf") && (
-                      file={activeDocument.file}
+                  <>
-                      onLoadSuccess={onDocumentLoadSuccess}
+                    <ScrollArea maw="100%">
-                    >
+                      <Document
-                      <Page pageNumber={pageNumber} scale={0.8} />
+                        file={activeDocument.file}
-                    </Document>
+                        onLoadSuccess={onDocumentLoadSuccess}
-                  </ScrollArea>
+                      >
-                  <Pagination
+                        <Page pageNumber={pageNumber} scale={0.8} />
-                    value={pageNumber}
+                      </Document>
-                    onChange={setPageNumber}
+                    </ScrollArea>
-                    total={numPages ?? 0}
+                    <Pagination
-                  />
+                      value={pageNumber}
-                </>
+                      onChange={setPageNumber}
-              )}
+                      total={numPages ?? 0}
-          </Stack>
+                    />
+                  </>
+                )}
+            </Stack>
+          </AppShell.Section>
         </AppShell.Aside>
 
         <AppShell.Footer p="md">