fix: stabilize responsive layout editing

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css

@@ -4,6 +4,10 @@
   background: color-mix(in srgb, var(--mantine-color-body) 82%, var(--mantine-primary-color-light));
   padding: var(--mantine-spacing-xs);
   min-height: 7rem;
+  max-height: min(24rem, 48dvh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 }
 
 .section {

apps/nextjs/src/app/[locale]/boards/_layout-utils.spec.ts

@@ -20,6 +20,18 @@ describe("layout representative widths", () => {
 });
 
 describe("projectBoardLayout", () => {
+  test("returns exact saved positions without recursively re-projecting the active layout", () => {
+    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
+    const dynamicSection = new DynamicSectionMockBuilder({ id: "dynamic" })
+      .addLayout({ layoutId: mobile.id, parentSectionId: rootSection.id, width: 3, height: 2 })
+      .build();
+    const board = new BoardMockBuilder().addLayout(mobile).addSections([rootSection, dynamicSection]).build();
+
+    expect(projectBoardLayout(board, mobile, mobile)).toEqual([
+      expect.objectContaining({ id: dynamicSection.id, sectionId: rootSection.id, width: 3, height: 2 }),
+    ]);
+  });
+
   test("uses production ordering and sizing for items and dynamic sections", () => {
     const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
     const dynamicSection = new DynamicSectionMockBuilder({ id: "dynamic" })

apps/nextjs/src/app/[locale]/boards/_layout-utils.ts

@@ -24,6 +24,10 @@ export const projectBoardLayout = (
 ) => {
   const elements = getElementsForLayout(board, sourceLayout.id);
 
+  if (sourceLayout.id === targetLayout.id && sourceLayout.columnCount === targetLayout.columnCount) {
+    return elements;
+  }
+
   return board.sections
     .filter((section) => section.kind !== "dynamic")
     .flatMap(