fix: stabilize rail and resize interactions

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)}
           />