From 1709ca904925e2c6f672fcbeeabe806eb48d79f6 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Fri, 12 Sep 2025 16:38:29 +0100
Subject: [PATCH] Rems

---
 frontend/src/components/shared/RightRail.tsx   |  4 ++--
 .../src/components/viewer/PdfViewerToolbar.tsx | 18 +++++++++---------
 .../src/components/viewer/SearchInterface.tsx  |  5 +++--
 .../src/components/viewer/ThumbnailSidebar.tsx | 10 +++++-----
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/shared/RightRail.tsx b/frontend/src/components/shared/RightRail.tsx
index 41ac3ae47..92f377076 100644
--- a/frontend/src/components/shared/RightRail.tsx
+++ b/frontend/src/components/shared/RightRail.tsx
@@ -230,7 +230,7 @@ export default function RightRail() {
                   </div>
                 </Popover.Target>
                 <Popover.Dropdown>
-                  <div style={{ minWidth: 320 }}>
+                  <div style={{ minWidth: '20rem' }}>
                     <SearchInterface 
                       visible={true} 
                       onClose={() => {}} 
@@ -343,7 +343,7 @@ export default function RightRail() {
                       </div>
                   </Popover.Target>
                   <Popover.Dropdown>
-                    <div style={{ minWidth: 280 }}>
+                    <div style={{ minWidth: '17.5rem' }}>
                       <BulkSelectionPanel
                         csvInput={csvInput}
                         setCsvInput={setCsvInput}
diff --git a/frontend/src/components/viewer/PdfViewerToolbar.tsx b/frontend/src/components/viewer/PdfViewerToolbar.tsx
index 7f612a8ff..725b4250d 100644
--- a/frontend/src/components/viewer/PdfViewerToolbar.tsx
+++ b/frontend/src/components/viewer/PdfViewerToolbar.tsx
@@ -140,7 +140,7 @@ export function PdfViewerToolbar({
           borderBottomRightRadius: 0,
           boxShadow: "0 -2px 8px rgba(0,0,0,0.04)",
           pointerEvents: "auto",
-          minWidth: 420,
+          minWidth: '26.5rem',
         }}
       >
         {/* First Page Button */}
@@ -152,7 +152,7 @@ export function PdfViewerToolbar({
           radius="xl"
           onClick={handleFirstPage}
           disabled={dynamicPage === 1}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={t("viewer.firstPage", "First Page")}
         >
           <FirstPageIcon fontSize="small" />
@@ -167,7 +167,7 @@ export function PdfViewerToolbar({
           radius="xl"
           onClick={handlePreviousPage}
           disabled={dynamicPage === 1}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={t("viewer.previousPage", "Previous Page")}
         >
           <ArrowBackIosIcon fontSize="small" />
@@ -204,7 +204,7 @@ export function PdfViewerToolbar({
           radius="xl"
           onClick={handleNextPage}
           disabled={dynamicPage === dynamicTotalPages}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={t("viewer.nextPage", "Next Page")}
         >
           <ArrowForwardIosIcon fontSize="small" />
@@ -219,7 +219,7 @@ export function PdfViewerToolbar({
           radius="xl"
           onClick={handleLastPage}
           disabled={dynamicPage === dynamicTotalPages}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={t("viewer.lastPage", "Last Page")}
         >
           <LastPageIcon fontSize="small" />
@@ -232,7 +232,7 @@ export function PdfViewerToolbar({
           size="md"
           radius="xl"
           onClick={onDualPageToggle}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={dualPage ? t("viewer.singlePageView", "Single Page View") : t("viewer.dualPageView", "Dual Page View")}
         >
           {dualPage ? <DescriptionIcon fontSize="small" /> : <ViewWeekIcon fontSize="small" />}
@@ -246,12 +246,12 @@ export function PdfViewerToolbar({
             size="md"
             radius="xl"
             onClick={handleZoomOut}
-            style={{ minWidth: 32, padding: 0 }}
+            style={{ minWidth: '2rem', padding: 0 }}
             title={t("viewer.zoomOut", "Zoom out")}
           >
             −
           </Button>
-          <span style={{ minWidth: 40, textAlign: "center" }}>
+          <span style={{ minWidth: '2.5rem', textAlign: "center" }}>
             {dynamicZoom}%
           </span>
           <Button
@@ -260,7 +260,7 @@ export function PdfViewerToolbar({
             size="md"
             radius="xl"
             onClick={handleZoomIn}
-            style={{ minWidth: 32, padding: 0 }}
+            style={{ minWidth: '2rem', padding: 0 }}
             title={t("viewer.zoomIn", "Zoom in")}
           >
             +
diff --git a/frontend/src/components/viewer/SearchInterface.tsx b/frontend/src/components/viewer/SearchInterface.tsx
index 3482c76e2..6837e5df5 100644
--- a/frontend/src/components/viewer/SearchInterface.tsx
+++ b/frontend/src/components/viewer/SearchInterface.tsx
@@ -120,7 +120,8 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
   const handleJumpToResult = (index: number) => {
     const searchAPI = (window as any).embedPdfSearch;
     if (searchAPI && resultInfo && index >= 1 && index <= resultInfo.totalResults) {
-      searchAPI.goToResult(index);
+      // Convert 1-based user input to 0-based API index
+      searchAPI.goToResult(index - 1);
     }
   };
 
@@ -200,7 +201,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
                 onKeyDown={handleJumpToKeyDown}
                 onBlur={handleJumpToSubmit}
                 placeholder={resultInfo.currentIndex.toString()}
-                style={{ width: '50px' }}
+                style={{ width: '3rem' }}
                 type="number"
                 min="1"
                 max={resultInfo.totalResults}
diff --git a/frontend/src/components/viewer/ThumbnailSidebar.tsx b/frontend/src/components/viewer/ThumbnailSidebar.tsx
index adb2e417e..070d88505 100644
--- a/frontend/src/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/components/viewer/ThumbnailSidebar.tsx
@@ -111,7 +111,7 @@ export function ThumbnailSidebar({ visible, onToggle, colorScheme }: ThumbnailSi
             right: 0,
             top: 0,
             bottom: 0,
-            width: '240px',
+            width: '15rem',
             backgroundColor: actualColorScheme === 'dark' ? '#1a1b1e' : '#f8f9fa',
             borderLeft: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`,
             zIndex: 998,
@@ -174,8 +174,8 @@ export function ThumbnailSidebar({ visible, onToggle, colorScheme }: ThumbnailSi
                       />
                     ) : thumbnails[pageIndex] === 'error' ? (
                       <div style={{
-                        width: '180px',
-                        height: '240px',
+                        width: '11.5rem',
+                        height: '15rem',
                         backgroundColor: actualColorScheme === 'dark' ? '#2d1b1b' : '#ffebee',
                         border: `1px solid ${actualColorScheme === 'dark' ? '#5d3737' : '#ffcdd2'}`,
                         borderRadius: '4px',
@@ -189,8 +189,8 @@ export function ThumbnailSidebar({ visible, onToggle, colorScheme }: ThumbnailSi
                       </div>
                     ) : (
                       <div style={{
-                        width: '180px',
-                        height: '240px',
+                        width: '11.5rem',
+                        height: '15rem',
                         backgroundColor: actualColorScheme === 'dark' ? '#25262b' : '#f8f9fa',
                         border: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`,
                         borderRadius: '4px',