fix: address mobile board review

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;

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>