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/container-section.tsx

@@ -46,6 +46,7 @@ export const BoardContainerSection = ({ section }: Props) => {
       <Card
         className={combineClasses(
           classes.itemCard,
+          classes.containerCard,
           options.customCssClasses.join(" "),
           isVisuallyCollapsed && classes.collapsedContainerCard,
         )}
@@ -56,7 +57,7 @@ export const BoardContainerSection = ({ section }: Props) => {
           root: {
             overflow: "visible",
             "--opacity": board.opacity / 100,
-            "--border-color": options.borderColor || undefined,
+            "--container-border-color": options.borderColor || undefined,
           },
         }}
         radius={board.itemRadius}
@@ -66,7 +67,7 @@ export const BoardContainerSection = ({ section }: Props) => {
           <Button
             className={classes.containerToggle}
             pos="absolute"
-            top={isVisuallyCollapsed ? 0 : -24}
+            top={isVisuallyCollapsed ? 0 : "calc(var(--mantine-spacing-xs) * -1)"}
             left={0}
             w="100%"
             h={isVisuallyCollapsed ? "100%" : 24}
@@ -103,8 +104,9 @@ export const BoardContainerSection = ({ section }: Props) => {
         )}
         {!isVisuallyCollapsed && !options.collapsible && options.showLabel && options.title && (
           <Badge
+            className={classes.containerLabel}
             pos="absolute"
-            top={-24}
+            top="calc(var(--mantine-spacing-xs) * -1)"
             left={labelLeft}
             maw={`calc(100% - ${labelLeft + labelRight}px)`}
             size="md"
@@ -113,12 +115,7 @@ export const BoardContainerSection = ({ section }: Props) => {
             c="var(--mantine-color-text)"
             style={{
               zIndex: 9,
-              overflow: "hidden",
               pointerEvents: "none",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              backgroundColor: "var(--background-color)",
-              borderColor: "var(--border-color)",
             }}
             title={options.title}
             data-board-container-label
@@ -128,8 +125,9 @@ export const BoardContainerSection = ({ section }: Props) => {
         )}
         {options.showOpenAll && !isEditMode && (
           <ActionIcon
+            className={classes.containerAction}
             pos="absolute"
-            top={isVisuallyCollapsed ? "50%" : -24}
+            top={isVisuallyCollapsed ? "50%" : "calc(var(--mantine-spacing-xs) * -1)"}
             right={8}
             style={{ zIndex: 10, transform: isVisuallyCollapsed ? "translateY(-50%)" : undefined }}
             variant={options.collapsible ? "subtle" : "default"}

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);

apps/nextjs/src/components/board/sections/item.module.css

@@ -11,6 +11,18 @@
   border-color: var(--border-color) !important;
 }
 
+.containerCard {
+  @mixin dark {
+    --container-default-border-color: var(--mantine-color-dark-4);
+  }
+  @mixin light {
+    --container-default-border-color: var(--mantine-color-gray-3);
+  }
+  --border-color: rgb(
+    from var(--container-border-color, var(--container-default-border-color)) r g b / var(--opacity, 1)
+  );
+}
+
 .itemCard:global(.iframe-wrapper) {
   background-color: transparent !important;
   border-color: transparent !important;
@@ -26,8 +38,8 @@
   z-index: 9;
   overflow: hidden;
   color: var(--mantine-color-text);
-  background-color: var(--background-color);
-  border-color: var(--border-color);
+  background-color: var(--background-color) !important;
+  border-color: var(--border-color) !important;
 }
 
 .containerToggle :global(.mantine-Button-inner) {
@@ -42,6 +54,24 @@
   white-space: nowrap;
 }
 
+.containerLabel,
+.containerAction {
+  background-color: var(--background-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.containerLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.containerLabel :global(.mantine-Badge-label) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .containerBody {
   visibility: visible;
   opacity: 1;