Merge branch 'main' into 'fix/edit-mode-scope'

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

client/src/components/layout/Canvas/components/Tooltip.jsx

@@ -0,0 +1,45 @@
+import { useState, useRef } from "react";
+import { chakra, useSlotRecipe } from "@chakra-ui/react";
+
+
+export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) {
+  const [isVisible, setIsVisible] = useState(!sidebarIsOpen);
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
+  const timeoutId = useRef(null);
+
+  return (
+    <chakra.div
+      width={sidebarIsOpen ? "194px" : "55px"}
+      transition="width 0.4s ease"
+      onMouseEnter={() => { timeoutId.current = setTimeout(() => setIsVisible(true), 1000); }}
+      onMouseLeave={() => {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+          timeoutId.current = null;
+        }
+        setIsVisible(false);
+      }} 
+    >
+      {children}
+      {isVisible && !sidebarIsOpen && (
+        <>
+          <chakra.div 
+            fontSize="xs"
+            position="absolute"
+            bg="gray.700"
+            color="white"
+            left="65px"
+            px={2}
+            py={1}
+            borderRadius="md"
+            whiteSpace="nowrap"
+            zIndex={10}
+          >
+            {content}
+          </chakra.div>
+        </>
+      )}
+    </chakra.div>
+  )
+}

client/src/components/layout/Canvas/components/Widget.jsx

@@ -12,13 +12,13 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }
         {isDelete ? (
           <>
             <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
-              <Text className="widget-handle" w="100%">{title}</Text>
+              <Text className="widget-handle" w="100%" fontWeight="bold">{title}</Text>
               <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
             </Flex>
           </>
         ):(
           <>
-            <Text className="widget-handle" >{title}</Text>
+            <Text className="widget-handle" fontWeight="bold">{title}</Text>
           </>
         )}
       </chakra.div>

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

@@ -106,7 +106,7 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
         zIndex="dropdown" // zIndex: 1100
 				bg="base200"
 				px={6}
-				py={3}
+				pt={3}
 				align="center"
 				justify="space-between"
       >
@@ -114,10 +114,10 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
           <Tabs.Trigger value="widget">
             My Dashboard
           </Tabs.Trigger>
-          <Tabs.Trigger value="gas">
+          <Tabs.Trigger value="gas" >
             Gas
           </Tabs.Trigger>
-          <Tabs.Trigger value="seismic">
+          <Tabs.Trigger value="seismic" >
             Seismic
           </Tabs.Trigger>
           <Tabs.Trigger value="remote">