From ad47c1dafbe020746dbd75c18b2a2ac7bc29942d Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Mon, 25 Aug 2025 21:23:19 +0100
Subject: [PATCH] layout updates

---
 frontend/src/components/pageEditor/DragDropGrid.tsx |  8 ++++++++
 frontend/src/components/pageEditor/PageEditor.tsx   |  8 ++++++--
 .../components/pageEditor/PageEditorControls.tsx    | 13 +------------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/pageEditor/DragDropGrid.tsx b/frontend/src/components/pageEditor/DragDropGrid.tsx
index 8e0ab0010..8928e1a34 100644
--- a/frontend/src/components/pageEditor/DragDropGrid.tsx
+++ b/frontend/src/components/pageEditor/DragDropGrid.tsx
@@ -94,6 +94,12 @@ const DragDropGrid = <T extends DragDropItem>({
 
 
 
+  // Calculate optimal width for centering
+  const remToPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  const itemWidth = parseFloat(GRID_CONSTANTS.ITEM_WIDTH) * remToPx;
+  const itemGap = parseFloat(GRID_CONSTANTS.ITEM_GAP) * remToPx;
+  const gridWidth = itemsPerRow * itemWidth + (itemsPerRow - 1) * itemGap;
+
   return (
     <Box 
       ref={containerRef}
@@ -108,6 +114,8 @@ const DragDropGrid = <T extends DragDropItem>({
           height: `${rowVirtualizer.getTotalSize()}px`,
           width: '100%',
           position: 'relative',
+          margin: '0 auto',
+          maxWidth: `${gridWidth}px`,
         }}
       >
         {rowVirtualizer.getVirtualItems().map((virtualRow) => {
diff --git a/frontend/src/components/pageEditor/PageEditor.tsx b/frontend/src/components/pageEditor/PageEditor.tsx
index 1f7db7a1c..365ed22a5 100644
--- a/frontend/src/components/pageEditor/PageEditor.tsx
+++ b/frontend/src/components/pageEditor/PageEditor.tsx
@@ -608,7 +608,7 @@ const PageEditor = ({
       )}
 
       {displayDocument && (
-        <Box ref={gridContainerRef} p={0} style={{ position: 'relative' }}>
+        <Box ref={gridContainerRef} p={0} pb="15rem" style={{ position: 'relative' }}>
 
 
           {/* Split Lines Overlay */}
@@ -641,7 +641,11 @@ const PageEditor = ({
               const col = position % itemsPerRow;
               
               // Position split line between pages (after the current page)
-              const leftPosition = col * itemWithGap + ITEM_WIDTH + (ITEM_GAP / 2);
+              // Calculate grid centering offset (same as DragDropGrid)
+              const gridWidth = itemsPerRow * ITEM_WIDTH + (itemsPerRow - 1) * ITEM_GAP;
+              const gridOffset = Math.max(0, (containerWidth - gridWidth) / 2);
+              
+              const leftPosition = gridOffset + col * itemWithGap + ITEM_WIDTH + (ITEM_GAP / 2);
               const topPosition = row * ITEM_HEIGHT + (ITEM_HEIGHT * 0.05); // Center vertically (5% offset since page is 90% height)
 
               return (
diff --git a/frontend/src/components/pageEditor/PageEditorControls.tsx b/frontend/src/components/pageEditor/PageEditorControls.tsx
index f64139228..070165cdd 100644
--- a/frontend/src/components/pageEditor/PageEditorControls.tsx
+++ b/frontend/src/components/pageEditor/PageEditorControls.tsx
@@ -121,7 +121,7 @@ const PageEditorControls = ({
           border: '1px solid var(--border-default)',
           borderRadius: '16px 16px 0 0',
           pointerEvents: 'auto',
-          minWidth: 420,
+          minWidth: 360,
           maxWidth: 700,
           flexWrap: 'wrap',
           justifyContent: 'center',
@@ -221,17 +221,6 @@ const PageEditorControls = ({
             </ActionIcon>
           </Tooltip>
         )}
-        <Tooltip label="Export All">
-          <ActionIcon
-            onClick={onExportAll}
-            disabled={exportLoading}
-            variant="light"
-            radius="md"
-            size="lg"
-          >
-            <DownloadIcon />
-          </ActionIcon>
-        </Tooltip>
       </div>
     </div>
   );