Remove grid spacing between cards and from edges

Set margin and containerPadding to [0,0] in ResponsiveGridLayout,
removed px-2/my-2/pb-8 from the wrapper div, and updated cellHeight
formula to not account for margins.

https://claude.ai/code/session_01THf2SuS7hLt9NgstxvKdg8
This commit is contained in:
Claude 2026-03-16 07:15:11 +00:00
parent d213edd25b
commit b7b5b08d53
No known key found for this signature in database

View File

@ -371,16 +371,8 @@ export default function DraggableGridLayout({
const cellHeight = useMemo(() => { const cellHeight = useMemo(() => {
const aspectRatio = 16 / 9; const aspectRatio = 16 / 9;
// subtract container margin, 1 camera takes up at least 4 rows return availableWidth / 12 / aspectRatio;
// account for additional margin on bottom of each row }, [availableWidth]);
return (
(availableWidth - 2 * marginValue) /
12 /
aspectRatio -
marginValue +
marginValue / 4
);
}, [availableWidth, marginValue]);
const handleResize = ( const handleResize = (
_layout: Layout, _layout: Layout,
@ -716,7 +708,7 @@ export default function DraggableGridLayout({
</div> </div>
) : ( ) : (
<div <div
className="no-scrollbar my-2 select-none overflow-x-hidden px-2 pb-8" className="no-scrollbar select-none overflow-x-hidden"
ref={gridContainerRef} ref={gridContainerRef}
> >
<EditGroupDialog <EditGroupDialog
@ -738,8 +730,8 @@ export default function DraggableGridLayout({
rowHeight={cellHeight} rowHeight={cellHeight}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }} breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 }} cols={{ lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 }}
margin={[marginValue, marginValue]} margin={[0, 0]}
containerPadding={[0, isEditMode ? 6 : 3]} containerPadding={[0, 0]}
resizeConfig={{ resizeConfig={{
enabled: isEditMode, enabled: isEditMode,
handles: isEditMode ? ["sw", "nw", "se", "ne"] : [], handles: isEditMode ? ["sw", "nw", "se", "ne"] : [],