Merge feat/dnd-kit-grid into feat/widget-modernization

apps/docs/docs/management/boards/index.mdx

@@ -134,7 +134,7 @@ For example, a 12-column layout with a two-column left rail leaves ten columns f
 Enabling or widening a rail reflows canvas items into the remaining columns.
 Disabling a rail moves its contents back into the next available canvas positions.
 
-Rails fill the available window height and remain fixed while the page scrolls.
+Rails fill the available window height and remain fixed while the page scrolls. They do not grow or scroll independently.
 Apps, widgets, and Containers inside them still use the same fixed `200 × 200` cells and can be rearranged in edit mode, where each rail shows its name and boundary.
 
 #### Breakpoint

apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css

@@ -21,10 +21,7 @@
   height: var(--board-gutter-viewport-height);
   padding-top: 24px;
   margin-top: -24px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
+  overflow: clip;
 }
 
 .gutter[data-board-editing="true"] {

apps/nextjs/src/components/board/sections/grid/grid-editor.css

@@ -116,11 +116,6 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
   pointer-events: none;
 }
 
-.board-grid-resize-outline[data-grid-resize-valid="false"] {
-  background: color-mix(in srgb, var(--mantine-color-red-filled) 8%, transparent);
-  border-color: var(--mantine-color-red-filled);
-}
-
 .board-grid-editor[data-dnd-drop-target="true"] {
   outline: 2px solid color-mix(in srgb, var(--mantine-primary-color-filled) 60%, transparent);
   outline-offset: 4px;

apps/nextjs/src/components/board/sections/grid/grid-editor.tsx

@@ -59,6 +59,7 @@ interface GridEditorProps {
   sectionId: string;
   columnCount: number;
   rowCount: number;
+  maxRowCount: number | null;
   placements: readonly SectionGridPlacement[];
   className: string;
 }
@@ -707,7 +708,14 @@ const GridCollisionSynchronizer = ({ interaction }: { interaction: GridInteracti
 };
 
 /** A section-local dnd-kit canvas registered with the board transaction. */
-export default function GridEditor({ sectionId, columnCount, rowCount, placements, className }: GridEditorProps) {
+export default function GridEditor({
+  sectionId,
+  columnCount,
+  rowCount,
+  maxRowCount,
+  placements,
+  className,
+}: GridEditorProps) {
   const t = useI18n();
   const { section, items, innerSections } = useSectionContext();
   const { interaction, registerGrid, getDepth, isDropTargetEligible } = useBoardGridEditor();
@@ -744,7 +752,7 @@ export default function GridEditor({ sectionId, columnCount, rowCount, placement
     interaction && (interaction.sourceGridId === sectionId || interaction.targetGridId === sectionId);
   const previewRowCount = getLayoutRowCount(previewGrid?.placements ?? renderPlacements);
   const renderedRowCount =
-    section.kind !== "container" && participatesInInteraction
+    maxRowCount === null && participatesInInteraction
       ? Math.max(rowCount, previewRowCount) + (growsDuringDrag ? 1 : 0)
       : rowCount;
 
@@ -775,14 +783,14 @@ export default function GridEditor({ sectionId, columnCount, rowCount, placement
     return registerGrid({
       id: sectionId,
       columnCount,
-      maxRowCount: section.kind === "container" ? rowCount : null,
+      maxRowCount,
       parentGridId,
       ownerPlacementId,
       placements,
       depth,
       element,
     });
-  }, [columnCount, depth, ownerPlacementId, parentGridId, placements, registerGrid, rowCount, section.kind, sectionId]);
+  }, [columnCount, depth, maxRowCount, ownerPlacementId, parentGridId, placements, registerGrid, sectionId]);
 
   useLayoutEffect(() => {
     const viewport = gridRef.current?.parentElement;
@@ -824,7 +832,7 @@ export default function GridEditor({ sectionId, columnCount, rowCount, placement
             placement={placement}
             label={label}
             columnCount={columnCount}
-            maxRowCount={section.kind === "container" ? rowCount : null}
+            maxRowCount={maxRowCount}
           />
         );
       })}
@@ -1044,6 +1052,7 @@ const GridResizeHandles = ({
     y: number;
     direction: GridResizeDirection;
     visualScale: { x: number; y: number };
+    placement: SectionGridPlacement;
   } | null>(null);
 
   const start = (direction: GridResizeDirection) =>
@@ -1077,7 +1086,14 @@ const GridResizeHandles = ({
       cancelResize();
       return;
     }
-    pointerStartRef.current = { id: event.pointerId, x: event.clientX, y: event.clientY, direction, visualScale };
+    pointerStartRef.current = {
+      id: event.pointerId,
+      x: event.clientX,
+      y: event.clientY,
+      direction,
+      visualScale,
+      placement: { ...placement },
+    };
   };
 
   const handlePointerMove = (event: ReactPointerEvent<HTMLSpanElement>) => {
@@ -1095,14 +1111,14 @@ const GridResizeHandles = ({
     const valid = update(started.direction, snappedDelta.x, snappedDelta.y);
     setContinuousResize({
       placement: getContinuousResizePlacement({
-        placement,
+        placement: started.placement,
         direction: started.direction,
         deltaColumns: continuousDelta.x,
         deltaRows: continuousDelta.y,
         columnCount,
         maxRowCount,
-        minWidth: placement.minW ?? 1,
-        minHeight: placement.minH ?? 1,
+        minWidth: started.placement.minW ?? 1,
+        minHeight: started.placement.minH ?? 1,
       }),
       valid,
     });

apps/nextjs/src/components/board/sections/grid/section-grid.tsx

@@ -150,6 +150,7 @@ export const SectionGrid = ({
   const minimumViewportRowCount = useMinimumViewportRowCount(section.kind === "empty", canvasScale);
   const contentRowCount = Math.max(1, getLayoutRowCount(displayPlacements));
   const rowCount = Math.max(contentRowCount, requestedRowCount, minimumViewportRowCount);
+  const maxRowCount = section.kind === "container" || railPlacement !== "main" ? rowCount : null;
   const logicalWidth = getLogicalTrackSize(columnCount);
   const logicalHeight = getLogicalTrackSize(rowCount);
   const canvasAttributes = isEditMode
@@ -164,7 +165,7 @@ export const SectionGrid = ({
         innerSections: displayedInnerSections,
         integrations,
         columnCount,
-        maxRowCount: section.kind === "container" ? rowCount : null,
+        maxRowCount,
         announce,
       }}
     >
@@ -182,6 +183,7 @@ export const SectionGrid = ({
             sectionId={section.id}
             columnCount={columnCount}
             rowCount={rowCount}
+            maxRowCount={maxRowCount}
             placements={displayPlacements}
             className={combineClasses("board-grid-editor", classes.editorGrid)}
           />