Update to buttons on widget choices

client/src/components/dashboard/SettingsButton.jsx

@@ -13,10 +13,16 @@ import {
   useRecipe,
   useSlotRecipe
 } from "@chakra-ui/react";
-import {Settings, Plus, LayoutGrid, Move, Save, X} from 'lucide-react';
+import {Settings, LayoutGrid, Move, Save, X} from 'lucide-react';
 import {useDashboardStore} from "../../store/useDashboardStore.jsx";
 import {WIDGET_REGISTRY} from "../../constants/widgetRegistry.jsx";
 
+// 🚨 NEW: Tiny helper to convert size keys into abbreviations
+const getSizeAbbreviation = (key) => {
+  const mapping = { small: "S", medium: "M", large: "L", xlarge: "XL" };
+  return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
+};
+
 export function SettingsButton() {
   // 1. ☁Store connections
   const isEditing = useDashboardStore(state => state.isEditing);
@@ -192,7 +198,7 @@ export function SettingsButton() {
                                        pt={3}>
                                     <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
                                           mb={2}>
-                                      Add to Grid:
+                                      Add to Dashboard:
                                     </Text>
                                     <HStack gap={2} flexWrap="wrap">
                                       {Object.keys(widget.allowedSizes).map(sizeKey => (
@@ -203,8 +209,24 @@ export function SettingsButton() {
                                           onClick={() => handleAddWidget(widget.id, sizeKey)}
                                           color={{base: "blue.600", _dark: "blue.300"}}
                                         >
-                                          <Plus size={16} style={{flexShrink: 0}}/>
+                                          {/* 🚨 THE ABBREVIATION ICON: Always visible */}
-                                          <Box as="span">{sizeKey.charAt(0).toUpperCase() + sizeKey.slice(1)}</Box>
+                                          <Flex
+                                            align="center"
+                                            justify="center"
+                                            w="24px"
+                                            h="24px"
+                                            flexShrink={0}
+                                            borderRadius="full"
+                                            bg={{ base: "blue.50", _dark: "whiteAlpha.200" }}
+                                            fontWeight="black"
+                                            fontSize="xs"
+                                            bg='transparent'
+                                          >
+                                            {getSizeAbbreviation(sizeKey)}
+                                          </Flex>
+
+                                          {/* 🚨 THE EXPANDED TEXT: Only visible on hover */}
+                                          <Box as="span">Add Widget</Box>
                                         </Box>
                                       ))}
                                     </HStack>
@@ -216,9 +238,7 @@ export function SettingsButton() {
                         ))}
                       </Tabs.Root>
                     </Dialog.Body>
-                    <Dialog.CloseTrigger position="absolute" top={3} right={3}
+                    <Dialog.CloseTrigger position="absolute" top={3} right={3} color={{ base: "gray.500", _dark: "whiteAlpha.800" }} _hover={{ color: "red.400" }} />
-                                         color={{base: "gray.500", _dark: "whiteAlpha.800"}}
-                                         _hover={{color: "red.400"}}/>
                   </Dialog.Content>
                 </Dialog.Positioner>
               </Dialog.Root>