fix: restore translucent dashboard styling (#6664)

* fix: restore translucent dashboard styling

* fix: restore dashboard widget transparency

* fix: address dashboard review feedback

* fix: apply board opacity to containers

* fix: flatten demo board container

* fix: default board roundness to sm

* fix: restore assistant widget transparency

* Revert "fix: default board roundness to sm"

This reverts commit c235cbdf2b.

* fix: address remaining dashboard review comments

* test: align grid geometry expectations

apps/nextjs/src/components/board/layout/README.md

@@ -3,8 +3,8 @@
 The board uses fixed logical units:
 
 - one `1 × 1` item is exactly `200 × 200` logical pixels;
-- the gap is always `24` logical pixels, giving a `224` pixel track pitch;
-- multi-cell items include the gaps between their cells (`2 × 1` is `424 × 200`);
+- the gap matches Mantine's `sm` spacing at `12` logical pixels, giving a `212` pixel track pitch;
+- multi-cell items include the gaps between their cells (`2 × 1` is `412 × 200`);
 - the canvas is zoomed once with one uniform scale derived from its available width.
 
 Items keep the same logical dimensions at every viewport. The viewport reserves

apps/nextjs/src/components/board/layout/constants.ts

@@ -3,7 +3,7 @@
  * individual cards never change their internal layout at different viewports.
  */
 export const LOGICAL_GRID_CELL_SIZE = 200;
-export const LOGICAL_GRID_GAP = 24;
+export const LOGICAL_GRID_GAP = 12;
 export const LOGICAL_GRID_PITCH = LOGICAL_GRID_CELL_SIZE + LOGICAL_GRID_GAP;
 
 export const COLLAPSED_SECTION_ROW_COUNT = 0.5;

apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css

@@ -23,6 +23,8 @@
    * zoom and enlarges everything together.
    */
   --mantine-scale: var(--board-canvas-ui-scale, 1);
+  /* Keep a subtle boundary inset without widening the visual gap too much. */
+  --board-grid-item-inset: calc(var(--mantine-spacing-xs) / 2);
   --mantine-spacing-xs: calc(0.625rem * var(--board-canvas-ui-scale, 1));
   --mantine-spacing-sm: calc(0.75rem * var(--board-canvas-ui-scale, 1));
   --mantine-spacing-md: calc(1rem * var(--board-canvas-ui-scale, 1));

apps/nextjs/src/components/board/layout/test/board-lanes.spec.ts

@@ -5,7 +5,12 @@ import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/bo
 import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
 import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
 import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
-import { getBoardLaneColumnCount, getInitialBoardLogicalHeight, getRootSectionForLane } from "../index";
+import {
+  getBoardLaneColumnCount,
+  getInitialBoardLogicalHeight,
+  getLogicalTrackSize,
+  getRootSectionForLane,
+} from "../index";
 
 describe("board lanes", () => {
   test("gutters consume columns from the main canvas", () => {
@@ -126,6 +131,6 @@ describe("board lanes", () => {
       },
     ];
 
-    expect(getInitialBoardLogicalHeight(board, layoutId)).toBe(872);
+    expect(getInitialBoardLogicalHeight(board, layoutId)).toBe(getLogicalTrackSize(4));
   });
 });

apps/nextjs/src/components/board/layout/test/geometry.spec.ts

@@ -9,18 +9,18 @@ import {
 } from "../index";
 
 describe("fixed dashboard geometry", () => {
-  test("keeps a 1x1 item exactly 200px with a fixed 24px gap", () => {
+  test("keeps a 1x1 item exactly 200px with a fixed 12px gap", () => {
     expect(getLogicalTrackSize(1)).toBe(200);
-    expect(getLogicalTrackSize(0.5)).toBe(88);
-    expect(getLogicalTrackSize(2)).toBe(424);
-    expect(getLogicalTrackSize(3)).toBe(648);
+    expect(getLogicalTrackSize(0.5)).toBe(94);
+    expect(getLogicalTrackSize(2)).toBe(412);
+    expect(getLogicalTrackSize(3)).toBe(624);
 
     expect(getLogicalItemStyle({ x: 1, y: 2, w: 2, h: 3 })).toEqual({
       position: "absolute",
-      left: 224,
-      top: 448,
-      width: 424,
-      height: 648,
+      left: 212,
+      top: 424,
+      width: 412,
+      height: 624,
     });
   });
 
@@ -35,7 +35,7 @@ describe("fixed dashboard geometry", () => {
     expect(getGridRowCountForVisualHeight(1200, 1)).toBe(6);
     expect(getLogicalTrackSize(getGridRowCountForVisualHeight(1200, 1))).toBeGreaterThanOrEqual(1200);
 
-    expect(getGridRowCountForVisualHeight(1200, 0.5)).toBe(11);
+    expect(getGridRowCountForVisualHeight(1200, 0.5)).toBe(12);
     expect(getLogicalTrackSize(getGridRowCountForVisualHeight(1200, 0.5)) * 0.5).toBeGreaterThanOrEqual(1200);
   });
 });