fix: address board review and CI feedback

apps/nextjs/src/components/board/mobile/mobile-board.module.css

@@ -1,6 +1,6 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(var(--mobile-column-count), minmax(0, 1fr));
   grid-auto-flow: row;
   grid-auto-rows: min(calc((100vw - 42px) / 2), 12rem);
   gap: 10px;

apps/nextjs/src/components/board/mobile/mobile-board.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { RefObject } from "react";
+import type { CSSProperties, RefObject } from "react";
 import { useMemo, useRef } from "react";
 import { Box } from "@mantine/core";
 
@@ -11,19 +11,22 @@ import type { GridItemHTMLElement, GridStack as GridStackInstance } from "@homar
 import { BoardItemContent } from "../items/item-content";
 import { SectionProvider } from "../sections/section-context";
 import classes from "./mobile-board.module.css";
-import { createMobileBoardItems } from "./mobile-layout";
+import { createMobileBoardItems, mobileColumnCount } from "./mobile-layout";
 
 export const MobileBoard = () => {
   const board = useRequiredBoard();
   const desktopLayout = getDesktopLayout(board);
   const items = useMemo(() => createMobileBoardItems(board, desktopLayout.id), [board, desktopLayout.id]);
-  const rootSection = board.sections.find((section) => section.kind !== "dynamic");
+  const rootSection = board.sections.find((section) => section.kind !== "dynamic") ?? {
+    id: "mobile",
+    kind: "empty" as const,
+    xOffset: 0,
+    yOffset: 0,
+  };
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement | null>>>({});
   const gridstackRef = useRef<GridStackInstance | null>(null);
 
-  if (!rootSection) return null;
-
   return (
     <ReadOnlyEditModeProvider>
       <SectionProvider
@@ -34,7 +37,11 @@ export const MobileBoard = () => {
           refs: { wrapper: wrapperRef, items: itemRefs, gridstack: gridstackRef },
         }}
       >
-        <Box className={classes.grid} data-mobile-board>
+        <Box
+          className={classes.grid}
+          style={{ "--mobile-column-count": mobileColumnCount } as CSSProperties}
+          data-mobile-board
+        >
           {items.map((item) => (
             <Box
               key={item.id}

apps/nextjs/src/components/board/mobile/mobile-layout.ts

@@ -1,6 +1,6 @@
 import type { Board, DynamicSectionItem, ItemLayout, SectionItem } from "~/app/[locale]/boards/_types";
 
-const mobileColumnCount = 2;
+export const mobileColumnCount = 2;
 const mobileMaxHeight = 3;
 
 type PositionedElement = DynamicSectionItem | SectionItem;

apps/nextjs/src/components/board/use-mobile-board.ts

@@ -1,7 +0,0 @@
-"use client";
-
-import { useMediaQuery } from "@mantine/hooks";
-
-export const mobileBoardMediaQuery = "(max-width: 48em)";
-
-export const useIsMobileBoard = () => useMediaQuery(mobileBoardMediaQuery);

apps/nextjs/src/components/board/use-mobile-board.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext } from "react";
+import { useMediaQuery } from "@mantine/hooks";
+
+export const mobileBoardMediaQuery = "(max-width: 48em)";
+
+const InitialMobileBoardContext = createContext<boolean | undefined>(undefined);
+
+export const MobileBoardViewportProvider = ({
+  initialIsMobile,
+  children,
+}: PropsWithChildren<{ initialIsMobile: boolean }>) => (
+  <InitialMobileBoardContext.Provider value={initialIsMobile}>{children}</InitialMobileBoardContext.Provider>
+);
+
+export const useIsMobileBoard = () => {
+  const initialIsMobile = useContext(InitialMobileBoardContext);
+  return useMediaQuery(mobileBoardMediaQuery, initialIsMobile, { getInitialValueInEffect: true });
+};