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 (
<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) => {

View File

@ -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 (

View File

@ -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>
);