From 031ac2bacfe59019bed8e79525af59d91f370c66 Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 8 Apr 2025 19:04:00 +0200
Subject: [PATCH] feat: :lipstick: move document select and pagination outside
 of scroll container

---
 src/Organizrr.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/Organizrr.tsx b/src/Organizrr.tsx
index 436b20c..01f6f69 100644
--- a/src/Organizrr.tsx
+++ b/src/Organizrr.tsx
@@ -521,12 +521,10 @@ function Organizrr() {
 
         <AppShell.Aside p="md" bg="var(--mantine-primary-color-0)">
           <AppShell.Section>
-            <Group style={{ alignSelf: "start" }}>
-              <IconEye /> <Title order={3}>Preview</Title>
-            </Group>
-          </AppShell.Section>
-          <AppShell.Section grow my="md" component={ScrollArea}>
-            <Stack align="center">
+            <Stack>
+              <Group style={{ alignSelf: "start" }}>
+                <IconEye /> <Title order={3}>Preview</Title>
+              </Group>
               <Select
                 label="Select file"
                 data={form.values.documents.map(({ id, file }) => ({
@@ -536,6 +534,10 @@ function Organizrr() {
                 value={activeDocumentId}
                 onChange={setActiveDocumentId}
               />
+            </Stack>
+          </AppShell.Section>
+          <AppShell.Section grow my="md" component={ScrollArea}>
+            <Stack align="center">
               {activeDocument &&
                 activeDocument.file.name.toLowerCase().endsWith(".pdf") && (
                   <>
@@ -547,15 +549,21 @@ function Organizrr() {
                         <Page pageNumber={pageNumber} scale={0.8} />
                       </Document>
                     </ScrollArea>
-                    <Pagination
-                      value={pageNumber}
-                      onChange={setPageNumber}
-                      total={numPages ?? 0}
-                    />
                   </>
                 )}
             </Stack>
           </AppShell.Section>
+          <AppShell.Section>
+            {activeDocument && (
+              <Stack align="center">
+                <Pagination
+                  value={pageNumber}
+                  onChange={setPageNumber}
+                  total={numPages ?? 0}
+                />
+              </Stack>
+            )}
+          </AppShell.Section>
         </AppShell.Aside>
 
         <AppShell.Footer p="md">