wip moving menu nav buttons in widget menu

client/src/pages/home/tabs/MyDashboard.jsx

@@ -68,28 +68,21 @@ export default function MyDashboard() {
       return (
         <>
           <Box css={styles.header}>
-            <Text color="titleColor" fontWeight="semibold" fontSize="md" isTruncated>
+            <Text>
               {registryEntry.name}
             </Text>
 
             {/* WIDGET SETTINGS BUTTON (ELLIPSES) */}
-            {SettingsUI ? (
+            {SettingsUI && (
               <Popover.Root positioning={{placement: "bottom-end"}}>
                 <Popover.Trigger asChild>
-                  <IconButton
-                    size="xs"
-                    variant="ghost"
-                    color="gray.400"
-                    borderRadius="xl"
-                    _hover={{color: "white", bg: "gray.700"}}
-                    aria-label="Widget Settings"
-                  >
+                  <IconButton size="xs" variant="ghost" aria-label="Widget Settings">
                     <MoreVertical size={16}/>
                   </IconButton>
                 </Popover.Trigger>
 
                 {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
-                <Popover.Positioner zIndex={10}>
+                <Popover.Positioner zIndex={1}>
                   <Popover.Content css={popoverStyles.root}>
                     <Suspense fallback={<Spinner size="sm"/>}>
                       <SettingsUI
@@ -100,8 +93,6 @@ export default function MyDashboard() {
                   </Popover.Content>
                 </Popover.Positioner>
               </Popover.Root>
-            ) : (
-              <Box w="20px" h="20px"/>
             )}
           </Box>
 
@@ -131,8 +122,8 @@ export default function MyDashboard() {
         rowHeight={30}
         isDraggable={isEditing}     // Only allows dragging when Settings tools toggle this
         isResizable={false}         // Double lock-down
-        onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
         compactType="vertical"      // Auto-packs widgets to the top
+        onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
       >
         {/* 🎨 Paint the Widgets */}
         {widgets.map(widget => (
@@ -151,17 +142,7 @@ export default function MyDashboard() {
             {isEditing && (
               <IconButton
                 aria-label="Remove widget"
-                position="absolute"
-                top={2}
-                right={2}
                 size="xs"
-                bg="white"
-                color="black"
-                border="1px solid"
-                borderRadius="xl"
-                borderColor="gray.200"
-                _hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
-                zIndex={2}
                 onClick={() => removeWidget(widget.id)}
                 onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
                 onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches