layout updates

This commit is contained in:
Reece Browne 2025-08-25 21:23:19 +01:00
parent 1a6e1fea2a
commit ad47c1dafb
3 changed files with 15 additions and 14 deletions

View File

@ -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 ( return (
<Box <Box
ref={containerRef} ref={containerRef}
@ -108,6 +114,8 @@ const DragDropGrid = <T extends DragDropItem>({
height: `${rowVirtualizer.getTotalSize()}px`, height: `${rowVirtualizer.getTotalSize()}px`,
width: '100%', width: '100%',
position: 'relative', position: 'relative',
margin: '0 auto',
maxWidth: `${gridWidth}px`,
}} }}
> >
{rowVirtualizer.getVirtualItems().map((virtualRow) => { {rowVirtualizer.getVirtualItems().map((virtualRow) => {

View File

@ -608,7 +608,7 @@ const PageEditor = ({
)} )}
{displayDocument && ( {displayDocument && (
<Box ref={gridContainerRef} p={0} style={{ position: 'relative' }}> <Box ref={gridContainerRef} p={0} pb="15rem" style={{ position: 'relative' }}>
{/* Split Lines Overlay */} {/* Split Lines Overlay */}
@ -641,7 +641,11 @@ const PageEditor = ({
const col = position % itemsPerRow; const col = position % itemsPerRow;
// Position split line between pages (after the current page) // 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) const topPosition = row * ITEM_HEIGHT + (ITEM_HEIGHT * 0.05); // Center vertically (5% offset since page is 90% height)
return ( return (

View File

@ -121,7 +121,7 @@ const PageEditorControls = ({
border: '1px solid var(--border-default)', border: '1px solid var(--border-default)',
borderRadius: '16px 16px 0 0', borderRadius: '16px 16px 0 0',
pointerEvents: 'auto', pointerEvents: 'auto',
minWidth: 420, minWidth: 360,
maxWidth: 700, maxWidth: 700,
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'center', justifyContent: 'center',
@ -221,17 +221,6 @@ const PageEditorControls = ({
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
)} )}
<Tooltip label="Export All">
<ActionIcon
onClick={onExportAll}
disabled={exportLoading}
variant="light"
radius="md"
size="lg"
>
<DownloadIcon />
</ActionIcon>
</Tooltip>
</div> </div>
</div> </div>
); );