feat(KB-164): fix mobile board double scrollbar with flex layout

- Switch board from 5-column grid to horizontally-scrollable flex layout on viewports ≤768px
- Add snap-scrolling and fixed min-width columns for polished mobile swipe
- Prevent ancestor elements (html, body, #root) from producing a second scrollbar
- Add board structure tests verifying columns are direct children of main element
- Add changeset for the mobile board fix (patch)

.changeset/fix-mobile-board-double-scrollbar.md

@@ -0,0 +1,5 @@
+---
+"@dustinbyrne/kb": patch
+---
+
+Fix double horizontal scrollbar on mobile board view by switching the board from a 5-column grid to a flex layout on narrow viewports (≤768px) with snap-scrolling.

packages/dashboard/app/components/__tests__/Board.test.tsx

@@ -52,4 +52,23 @@ describe("Board", () => {
       expect(screen.getByTestId(`column-${col}`)).toBeDefined();
     }
   });
+
+  it("renders all 5 columns as direct children of .board (CSS selector target)", () => {
+    renderBoard();
+    const board = screen.getByRole("main");
+    // The mock Column renders <div data-testid="column-{col}" />, which are direct children
+    const directChildren = Array.from(board.children);
+    expect(directChildren).toHaveLength(COLUMNS.length);
+    // Each direct child should be one of the column test-id elements
+    for (const col of COLUMNS) {
+      const colEl = screen.getByTestId(`column-${col}`);
+      expect(colEl.parentElement).toBe(board);
+    }
+  });
+
+  it("renders the board element as a <main> tag (semantic structure)", () => {
+    renderBoard();
+    const board = screen.getByRole("main");
+    expect(board.tagName).toBe("MAIN");
+  });
 });

packages/dashboard/app/styles.css

@@ -1296,10 +1296,44 @@ html, body {
   font-weight: 600;
 }
 
-/* === Mobile: Task Detail Modal ===
+/* === Mobile Responsive Overrides ===
-   On narrow viewports (≤768px) the modal goes full-screen, action buttons wrap,
+   On narrow viewports (≤768px) the board switches from a 5-column grid to a
-   and spacing is reduced to stay usable on screens as small as 320px. */
+   horizontally-scrollable flex layout so only one scrollbar appears.  Each
+   column gets a fixed min-width and snap-scrolling for a polished swipe feel.
+   The modal also goes full-screen with reduced spacing. */
 @media (max-width: 768px) {
+  /* Prevent ancestor elements from producing a second horizontal scrollbar */
+  html, body {
+    overflow: hidden;
+  }
+
+  #root {
+    overflow: hidden;
+  }
+
+  /* Board: flex layout with single horizontal scroll + snap */
+  .board {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .board > .column {
+    min-width: 280px;
+    flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+
+  /* Reduce header padding to reclaim horizontal space */
+  .header {
+    padding: 12px 12px;
+  }
+
+  /* Modal: full-screen on mobile */
   .modal-overlay {
     padding-top: 0;
     align-items: stretch;