Update tabs in widget library now scroll and look nice

client/src/components/dashboard/SettingsButton.jsx

@@ -168,12 +168,55 @@ export function SettingsButton() {
                     </Dialog.Header>
 
                     <Dialog.Body p={0}>
-                      <Tabs.Root defaultValue={categories[0]} variant="enclosed" colorScheme="blue">
-                        <Tabs.List bg="transparent" px={4} pt={4}
-                                   borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
+                      <Tabs.Root defaultValue={categories[0]} variant="unstyled">
+                        <Tabs.List
+                          bg={{ base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" }}
+                          p={1}
+                          mx={3}
+                          mt={4}
+                          mb={6}
+                          borderRadius="full" // Back to a perfect pill shape!
+                          display="flex"
+                          flexWrap="nowrap" // 🚨 STRICTLY lock to one line
+                          overflowX="auto" // 🚨 Allow horizontal scrolling
+                          maxWidth="100%" // Ensure it doesn't break out of the modal
+                          border="1px solid"
+                          borderColor={{ base: "blackAlpha.50", _dark: "whiteAlpha.100" }}
+                          css={{
+                            // 🚨 Hide the scrollbar but keep the scrolling functionality
+                            scrollbarWidth: "none",
+                            "&::-webkit-scrollbar": { display: "none" },
+                          }}
+                          onWheel={(e) => {
+                          if (e.currentTarget) {
+                            e.currentTarget.scrollLeft += e.deltaY;
+                          }
+                        }}
+                        >
                           {categories.map(cat => (
-                            <Tabs.Trigger key={cat} value={cat} pb={2}
-                                          _selected={{color: "blue.500", borderColor: "blue.500"}}>{cat}</Tabs.Trigger>
+                            <Tabs.Trigger
+                              key={cat}
+                              value={cat}
+                              px={5}
+                              py={2}
+                              borderRadius="full"
+                              whiteSpace="nowrap" // Keep text on one straight line
+                              flexShrink={0} // 🚨 Prevent the browser from trying to crush the tabs
+                              color={{ base: "gray.500", _dark: "gray.400" }}
+                              fontWeight="medium"
+                              transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
+                              _hover={{
+                                color: { base: "gray.800", _dark: "gray.200" }
+                              }}
+                              _selected={{
+                                bg: { base: "white", _dark: "rgba(255, 255, 255, 0.12)" },
+                                color: { base: "blue.600", _dark: "blue.200" },
+                                boxShadow: "sm",
+                                fontWeight: "bold",
+                              }}
+                            >
+                              {cat}
+                            </Tabs.Trigger>
                           ))}
                         </Tabs.List>