From c7b299624e0a8e6522df570e7be93cc7b596b9c4 Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 8 Apr 2025 18:54:50 +0200
Subject: [PATCH] feat: :lipstick: add scrollbar to preview pane

---
 src/Organizrr.tsx | 62 +++++++++++++++++++++++++----------------------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/Organizrr.tsx b/src/Organizrr.tsx
index cabd2a2..436b20c 100644
--- a/src/Organizrr.tsx
+++ b/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
-              label="Select file"
-              data={form.values.documents.map(({ id, file }) => ({
-                value: id,
-                label: file.name,
-              }))}
-              value={activeDocumentId}
-              onChange={setActiveDocumentId}
-            />
-            {activeDocument &&
-              activeDocument.file.name.toLowerCase().endsWith(".pdf") && (
-                <>
-                  <ScrollArea maw="100%">
-                    <Document
-                      file={activeDocument.file}
-                      onLoadSuccess={onDocumentLoadSuccess}
-                    >
-                      <Page pageNumber={pageNumber} scale={0.8} />
-                    </Document>
-                  </ScrollArea>
-                  <Pagination
-                    value={pageNumber}
-                    onChange={setPageNumber}
-                    total={numPages ?? 0}
-                  />
-                </>
-              )}
-          </Stack>
+          </AppShell.Section>
+          <AppShell.Section grow my="md" component={ScrollArea}>
+            <Stack align="center">
+              <Select
+                label="Select file"
+                data={form.values.documents.map(({ id, file }) => ({
+                  value: id,
+                  label: file.name,
+                }))}
+                value={activeDocumentId}
+                onChange={setActiveDocumentId}
+              />
+              {activeDocument &&
+                activeDocument.file.name.toLowerCase().endsWith(".pdf") && (
+                  <>
+                    <ScrollArea maw="100%">
+                      <Document
+                        file={activeDocument.file}
+                        onLoadSuccess={onDocumentLoadSuccess}
+                      >
+                        <Page pageNumber={pageNumber} scale={0.8} />
+                      </Document>
+                    </ScrollArea>
+                    <Pagination
+                      value={pageNumber}
+                      onChange={setPageNumber}
+                      total={numPages ?? 0}
+                    />
+                  </>
+                )}
+            </Stack>
+          </AppShell.Section>
         </AppShell.Aside>
 
         <AppShell.Footer p="md">