From 866b3ab78b01a6cd56e9666b3da9da5b852ab1d6 Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Sat, 8 Aug 2026 12:34:10 +0200
Subject: [PATCH] fix: address mobile board review

---
 .../board/mobile/mobile-board.module.css      |  5 ++-
 .../components/board/mobile/mobile-board.tsx  | 32 ++++++++++---------
 packages/db/migrations/seed.spec.ts           |  2 +-
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/apps/nextjs/src/components/board/mobile/mobile-board.module.css b/apps/nextjs/src/components/board/mobile/mobile-board.module.css
index 7dfa65cc2..4a243dd04 100644
--- a/apps/nextjs/src/components/board/mobile/mobile-board.module.css
+++ b/apps/nextjs/src/components/board/mobile/mobile-board.module.css
@@ -1,5 +1,8 @@
-.grid {
+.container {
   container-type: inline-size;
+}
+
+.grid {
   display: grid;
   grid-template-columns: repeat(var(--mobile-column-count), minmax(0, 1fr));
   grid-auto-flow: row;
diff --git a/apps/nextjs/src/components/board/mobile/mobile-board.tsx b/apps/nextjs/src/components/board/mobile/mobile-board.tsx
index aa06a521f..20e4b9445 100644
--- a/apps/nextjs/src/components/board/mobile/mobile-board.tsx
+++ b/apps/nextjs/src/components/board/mobile/mobile-board.tsx
@@ -32,21 +32,23 @@ export const MobileBoard = () => {
           refs: { wrapper: wrapperRef, items: itemRefs, gridstack: gridstackRef },
         }}
       >
-        <Box
-          className={classes.grid}
-          style={{ "--mobile-column-count": mobileColumnCount } as CSSProperties}
-          data-mobile-board
-        >
-          {items.map((item) => (
-            <Box
-              key={item.id}
-              className={classes.item}
-              style={{ gridColumn: `span ${item.width}`, gridRow: `span ${item.height}` }}
-              data-mobile-board-item={item.id}
-            >
-              <BoardItemContent item={item} />
-            </Box>
-          ))}
+        <Box ref={wrapperRef} className={classes.container}>
+          <Box
+            className={classes.grid}
+            style={{ "--mobile-column-count": mobileColumnCount } as CSSProperties}
+            data-mobile-board
+          >
+            {items.map((item) => (
+              <Box
+                key={item.id}
+                className={classes.item}
+                style={{ gridColumn: `span ${item.width}`, gridRow: `span ${item.height}` }}
+                data-mobile-board-item={item.id}
+              >
+                <BoardItemContent item={item} />
+              </Box>
+            ))}
+          </Box>
         </Box>
       </SectionProvider>
     </ReadOnlyEditModeProvider>
diff --git a/packages/db/migrations/seed.spec.ts b/packages/db/migrations/seed.spec.ts
index 802fd6559..0e0c49acc 100644
--- a/packages/db/migrations/seed.spec.ts
+++ b/packages/db/migrations/seed.spec.ts
@@ -49,7 +49,7 @@ describe("automatic mobile layout upgrade default", () => {
   test.each([
     { boardId: "board", name: "Phone", breakpoint: 0 },
     { boardId: "board", name: "Base", breakpoint: 480 },
-  ])("preserves legacy mode for a noncanonical saved layout", (existingLayout) => {
+  ])("preserves legacy mode for a noncanonical saved layout $name/$breakpoint", (existingLayout) => {
     expect(shouldEnableAutomaticMobileLayoutForUpgrade([existingLayout])).toBe(false);
   });