fix(board): correct widget scaling and edit layering (#6741)

apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts

@@ -21,7 +21,7 @@ describe("item actions create-item", () => {
       .build();
     const baseLayout = board.layouts.find((layout) => layout.role === "base");
 
-    const result = createItemCallback({ kind: "mediaMissing" })(board);
+    const result = createItemCallback({ kind: "downloads" })(board);
 
     const createdItem = result.items.at(0);
     expect(createdItem?.layouts.find((layout) => layout.layoutId === "mobile")?.width).toBe(3);
@@ -165,7 +165,7 @@ describe("item actions create-item", () => {
     const result = createItemCallback({ id: "calendar", kind: "mediaMissing", targetSectionId: "media" })(board);
 
     expect(result.items.find((item) => item.id === "calendar")?.layouts).toEqual([
-      expect.objectContaining({ layoutId: "layout", sectionId: "media", width: 4 }),
+      expect.objectContaining({ layoutId: "layout", sectionId: "media", width: 2 }),
     ]);
   });
 
@@ -262,7 +262,7 @@ describe("item actions create-item", () => {
         layoutId: layout.id,
         sectionId: "canvas",
         width: 1,
-        height: 3,
+        height: 2,
         xOffset: 0,
         yOffset: 1,
       }),

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

@@ -13,7 +13,7 @@
 
 .board-grid-entry:has([data-board-widget-header]):hover,
 .board-grid-entry:has([data-board-widget-header]):focus-within {
-  z-index: var(--homarr-z-index-widget-focus);
+  z-index: calc(var(--homarr-z-index-board-header) - 1);
 }
 
 .board-grid-entry[data-grid-preview="true"] {