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/sections/grid/board-grid-editor-boundary.tsx

@@ -7,7 +7,7 @@ import { createPortal } from "react-dom";
 import { useEditMode } from "@homarr/boards/edit-mode";
 
 import { getLoadedGridEditorModule, loadGridEditorAsync } from "./grid-editor-loader";
-import { GridEditorRegistryProvider, useRegisteredGridEditors } from "./grid-editor-registry";
+import { useRegisteredGridEditors } from "./grid-editor-registry";
 import { GridEditorRuntimeProvider } from "./grid-editor-runtime";
 
 type BoardGridEditorProviderComponent = ComponentType<PropsWithChildren>;
@@ -54,14 +54,14 @@ export const BoardGridEditorBoundary = ({ children }: PropsWithChildren) => {
   const GridEditor = resolvedEditorModule?.default ?? null;
 
   return (
-    <GridEditorRegistryProvider>
+    <>
       <GridEditorRuntimeProvider status={runtimeStatus}>{children}</GridEditorRuntimeProvider>
       {isEditMode && Provider && GridEditor && (
         <Provider>
           <RegisteredGridEditors GridEditor={GridEditor} />
         </Provider>
       )}
-    </GridEditorRegistryProvider>
+    </>
   );
 };
 

apps/nextjs/src/components/board/sections/grid/dnd/coordinates.spec.ts

@@ -23,7 +23,12 @@ describe("dnd grid coordinates", () => {
   test("uses the dragged shape origin so a non-center grab retains its pointer offset", () => {
     const scale = 0.75;
     const target = { left: -280, top: 390, width: getLogicalTrackSize(5) * scale };
-    const initialShape = { left: target.left, top: target.top, width: 424 * scale, height: 200 * scale };
+    const initialShape = {
+      left: target.left,
+      top: target.top,
+      width: getLogicalTrackSize(2) * scale,
+      height: 200 * scale,
+    };
     const pointerDelta = { x: LOGICAL_GRID_PITCH * scale * 2, y: LOGICAL_GRID_PITCH * scale * 3 };
 
     expect(

apps/nextjs/src/components/board/sections/grid/grid-editor-registry.tsx

@@ -55,6 +55,7 @@ export interface GridEditorRenderProps {
 }
 
 export interface RegisteredGridEditor extends GridEditorRenderProps {
+  placementMaxRowCount: number | null;
   host: HTMLElement;
   disabled: boolean;
 }

apps/nextjs/src/components/board/sections/grid/grid-editor.css

@@ -51,7 +51,7 @@
 
 .board-grid-entry[data-board-item-selected="true"]::after {
   position: absolute;
-  inset: 0;
+  inset: var(--board-grid-item-inset, 0px);
   z-index: 100;
   content: "";
   background: color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent);
@@ -121,6 +121,7 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 
 .board-grid-placeholder {
   z-index: 0;
+  clip-path: inset(var(--board-grid-item-inset, 0px));
   background: color-mix(in srgb, var(--mantine-primary-color-filled) 16%, transparent);
   border: 2px dashed var(--mantine-primary-color-filled);
   border-radius: var(--mantine-radius-md);
@@ -139,6 +140,7 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 
 .board-grid-resize-outline {
   z-index: 1002;
+  clip-path: inset(var(--board-grid-item-inset, 0px));
   background: color-mix(in srgb, var(--mantine-primary-color-filled) 6%, transparent);
   border: 2px solid var(--mantine-primary-color-filled);
   border-radius: var(--mantine-radius-md);
@@ -153,17 +155,6 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
   box-shadow: inset 0 0 0 2px var(--mantine-color-red-filled);
 }
 
-[data-section-kind="empty"][data-rail-placement="main"] > .board-grid-editor[data-dnd-drop-target="true"] {
-  outline: 2px solid color-mix(in srgb, var(--mantine-primary-color-filled) 60%, transparent);
-  outline-offset: 4px;
-  box-shadow: none;
-}
-
-[data-section-kind="empty"][data-rail-placement="main"]
-  > .board-grid-editor[data-dnd-drop-target="true"][data-dnd-drop-valid="false"] {
-  outline-color: var(--mantine-color-red-filled);
-}
-
 [data-board-container-collapsed]
   > [data-board-container-body]
   > [data-section-id]
@@ -240,11 +231,11 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="n"] {
-  top: -0.25rem;
+  top: calc(var(--board-grid-item-inset, 0px) - 0.25rem);
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="s"] {
-  bottom: -0.25rem;
+  bottom: calc(var(--board-grid-item-inset, 0px) - 0.25rem);
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="e"],
@@ -258,11 +249,11 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="e"] {
-  right: -0.25rem;
+  right: calc(var(--board-grid-item-inset, 0px) - 0.25rem);
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="w"] {
-  left: -0.25rem;
+  left: calc(var(--board-grid-item-inset, 0px) - 0.25rem);
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="ne"],
@@ -275,42 +266,30 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="ne"] {
-  top: -0.625rem;
-  right: -0.625rem;
+  top: calc(var(--board-grid-item-inset, 0px) - 0.625rem);
+  right: calc(var(--board-grid-item-inset, 0px) - 0.625rem);
   cursor: nesw-resize;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="se"] {
-  right: -0.625rem;
-  bottom: -0.625rem;
+  right: calc(var(--board-grid-item-inset, 0px) - 0.625rem);
+  bottom: calc(var(--board-grid-item-inset, 0px) - 0.625rem);
   cursor: nwse-resize;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="sw"] {
-  bottom: -0.625rem;
-  left: -0.625rem;
+  bottom: calc(var(--board-grid-item-inset, 0px) - 0.625rem);
+  left: calc(var(--board-grid-item-inset, 0px) - 0.625rem);
   cursor: nesw-resize;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="nw"] {
-  top: -0.625rem;
-  left: -0.625rem;
+  top: calc(var(--board-grid-item-inset, 0px) - 0.625rem);
+  left: calc(var(--board-grid-item-inset, 0px) - 0.625rem);
   cursor: nwse-resize;
   /* Leaves a thin draggable border around the corner instead of a solid 44x44 hit area,
      so it doesn't sit on top of the container menu button anchored in this same corner. */
-  clip-path: polygon(
-    evenodd,
-    0 0,
-    100% 0,
-    100% 100%,
-    0 100%,
-    0 0,
-    4px 4px,
-    4px 40px,
-    40px 40px,
-    40px 4px,
-    4px 4px
-  );
+  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 4px 4px, 4px 40px, 40px 40px, 40px 4px, 4px 4px);
 }
 
 @media (prefers-reduced-motion: reduce) {

apps/nextjs/src/components/board/sections/grid/section-grid.module.css

@@ -46,12 +46,14 @@
 
 .contentMount {
   position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  inset: var(--board-grid-item-inset, 0px);
   overflow: visible;
 }
 
+.staticItem:has([data-board-container-label]) {
+  z-index: 2;
+}
+
 .editorEntry {
   overflow: visible;
   cursor: grab;

apps/nextjs/src/components/board/sections/grid/section-grid.tsx

@@ -130,6 +130,10 @@ export const SectionGrid = ({
   const contentRowCount = Math.max(1, getLayoutRowCount(displayPlacements));
   const rowCount = Math.max(contentRowCount, requestedRowCount, minimumViewportRowCount);
   const maxRowCount = section.kind === "container" || railPlacement !== "main" ? rowCount : null;
+  let placementMaxRowCount = maxRowCount;
+  if (railPlacement !== "main") {
+    placementMaxRowCount = minimumViewportRowCount;
+  }
   // A scrollable container isn't forced to grow with its content - it scrolls internally instead
   // of expanding to fit every widget, so its viewport height is capped independently of rowCount.
   const isScrollableContainer = section.kind === "container" && section.options.scrollable;
@@ -175,6 +179,7 @@ export const SectionGrid = ({
       columnCount,
       rowCount,
       maxRowCount,
+      placementMaxRowCount,
       placements: displayPlacements,
       transactionPlacements: placements,
       className: editorClassName,
@@ -190,6 +195,7 @@ export const SectionGrid = ({
     entryElementStore,
     isInteractionDisabled,
     maxRowCount,
+    placementMaxRowCount,
     placements,
     rowCount,
     section,

apps/nextjs/src/components/board/sections/grid/test/grid-preview-geometry.spec.ts

@@ -1,5 +1,7 @@
 import { beforeEach, describe, expect, test } from "vitest";
 
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+
 import { createGridPreviewDomState, syncGridPreviewGeometry } from "../grid-preview-geometry";
 
 describe("grid preview geometry", () => {
@@ -25,8 +27,12 @@ describe("grid preview geometry", () => {
 
     expect(elements.get("active")?.hasAttribute("data-grid-preview")).toBe(false);
     expect(elements.get("active")?.getAttribute("data-dnd-active")).toBe("true");
-    expect(elements.get("displaced")?.style.getPropertyValue("--board-grid-preview-x")).toBe("-448px");
-    expect(elements.get("displaced")?.style.getPropertyValue("--board-grid-preview-y")).toBe("448px");
+    expect(elements.get("displaced")?.style.getPropertyValue("--board-grid-preview-x")).toBe(
+      `${-2 * LOGICAL_GRID_PITCH}px`,
+    );
+    expect(elements.get("displaced")?.style.getPropertyValue("--board-grid-preview-y")).toBe(
+      `${2 * LOGICAL_GRID_PITCH}px`,
+    );
     expect(elements.get("displaced")?.dataset.gridX).toBe("0");
     expect(elements.get("displaced")?.dataset.gridY).toBe("2");
 
@@ -57,10 +63,10 @@ describe("grid preview geometry", () => {
 
     const active = elements.get("active");
     expect(active?.getAttribute("data-grid-preview")).toBe("true");
-    expect(active?.style.getPropertyValue("--board-grid-preview-x")).toBe("224px");
-    expect(active?.style.getPropertyValue("--board-grid-preview-y")).toBe("224px");
-    expect(active?.style.getPropertyValue("--board-grid-preview-width")).toBe("648px");
-    expect(active?.style.getPropertyValue("--board-grid-preview-height")).toBe("872px");
+    expect(active?.style.getPropertyValue("--board-grid-preview-x")).toBe(`${LOGICAL_GRID_PITCH}px`);
+    expect(active?.style.getPropertyValue("--board-grid-preview-y")).toBe(`${LOGICAL_GRID_PITCH}px`);
+    expect(active?.style.getPropertyValue("--board-grid-preview-width")).toBe(`${getLogicalTrackSize(3)}px`);
+    expect(active?.style.getPropertyValue("--board-grid-preview-height")).toBe(`${getLogicalTrackSize(4)}px`);
     expect(active?.dataset.gridW).toBe("3");
     expect(active?.dataset.gridH).toBe("4");
   });

apps/nextjs/src/components/board/sections/grid/test/grid-resize-outline.spec.ts

@@ -1,5 +1,7 @@
 import { afterEach, describe, expect, test, vi } from "vitest";
 
+import { getLogicalTrackSize } from "~/components/board/layout";
+
 import { createGridResizeOutlineController } from "../grid-resize-outline";
 
 describe("grid resize outline", () => {
@@ -28,8 +30,8 @@ describe("grid resize outline", () => {
     const outline = shell.querySelector<HTMLElement>("[data-grid-resize-outline]");
     expect(outline?.style.left).toBe("0px");
     expect(outline?.style.top).toBe("0px");
-    expect(outline?.style.width).toBe("200px");
-    expect(outline?.style.height).toBe("424px");
+    expect(outline?.style.width).toBe(`${getLogicalTrackSize(1)}px`);
+    expect(outline?.style.height).toBe(`${getLogicalTrackSize(2)}px`);
     expect(outline?.dataset.gridResizeValid).toBe("false");
 
     controller.schedule(null);