feat(KB-171): constrain column widths in desktop grid and mobile flex

- Change desktop .column min-width from 260px to 0, letting the grid control sizing
- Add overflow-x: hidden to .column-body to prevent content blowout
- Use fixed width: 280px for mobile columns instead of min-width
- Add column-fixed-width tests verifying CSS constraints for desktop and mobile

packages/dashboard/app/__tests__/column-fixed-width.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+const css = readFileSync(resolve(__dirname, "../styles.css"), "utf-8");
+
+describe("column fixed-width CSS", () => {
+  // Extract the base .column { ... } block (not inside a media query)
+  const columnBlock = css.match(/\.column\s*\{[^}]*\}/)![0];
+
+  // Extract the .column-body { ... } block
+  const columnBodyBlock = css.match(/\.column-body\s*\{[^}]*\}/)![0];
+
+  // Extract the mobile media block
+  const mediaStart = css.search(
+    /@media\s*\([^)]*max-width:\s*768px[^)]*\)\s*\{/,
+  );
+  const mobileBlock = css.slice(mediaStart);
+
+  describe("desktop .column", () => {
+    it("has min-width: 0 (not 260px)", () => {
+      expect(columnBlock).toContain("min-width: 0");
+      expect(columnBlock).not.toContain("min-width: 260px");
+    });
+
+    it("still has overflow: hidden", () => {
+      expect(columnBlock).toContain("overflow: hidden");
+    });
+  });
+
+  describe(".column-body", () => {
+    it("has overflow-x: hidden", () => {
+      expect(columnBodyBlock).toContain("overflow-x: hidden");
+    });
+  });
+
+  describe("desktop .board grid template", () => {
+    it("still uses repeat(5, minmax(260px, 1fr))", () => {
+      expect(css).toContain(
+        "grid-template-columns: repeat(5, minmax(260px, 1fr))",
+      );
+    });
+  });
+
+  describe("mobile .board > .column", () => {
+    it("has a fixed 280px width constraint", () => {
+      // Accept either `width: 280px` or both min-width + max-width: 280px
+      const hasFix =
+        mobileBlock.includes("width: 280px") ||
+        (mobileBlock.includes("min-width: 280px") &&
+          mobileBlock.includes("max-width: 280px"));
+      expect(hasFix).toBe(true);
+    });
+  });
+});

packages/dashboard/app/styles.css

@@ -200,7 +200,7 @@ body {
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
   overflow: hidden;
-  min-width: 260px;
+  min-width: 0;
   min-height: 0;
   transition: border-color 0.2s;
   scroll-snap-align: center;
@@ -277,6 +277,7 @@ body {
 .column-body {
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 4px 8px 8px;
   display: flex;
   flex-direction: column;
@@ -1529,7 +1530,7 @@ body {
   }
 
   .board > .column {
-    min-width: 280px;
+    width: 280px;
     flex-shrink: 0;
     scroll-snap-align: center;
   }