Merge branch 'main' into 'add/widgets/conditional-deleting'

# Conflicts:
#   client/src/components/layout/Canvas/views/DashboardCanvas.jsx

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -10,16 +10,10 @@ import { useState, useEffect, useDebugValue } from "react";
 import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
 
-export function DashboardCanvas() {
-  console.log("rendering dashboardcanvas");
+export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [isDelete, setIsDelete] = useState(false);
   const [newCounter, setNewCounter] = useState(3);
-  const [layout, setLayout] = useState([
-    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
-    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
-    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
-  ]);
   const [originalLayout, setOriginalLayout] = useState([]);
 
   const onAddWidget = () => {
@@ -85,11 +79,6 @@ export function DashboardCanvas() {
     setLayout(layout => layout.filter(w => w.i !== id));
   }
 
-  const onLayoutChange = (newLayout) => { 
-    setLayout(newLayout);
-    console.log('Updated layout:', newLayout)
-  };
-
   return (
     /* HEADER */
     <Tabs.Root lazyMount defaultValue="my dashboard">
@@ -97,7 +86,7 @@ export function DashboardCanvas() {
         as="header"
 				position="sticky"
 				top="0"
-        zIndex="banner"
+        zIndex="dropdown" // zIndex: 1100
 				bg="base200"
 				px={6}
 				py={3}