chore: add gap between manager top tab triggers and contents (#410)

CSCI-SHU-410-SE-Project · Feb 6, 2025 · e311b51 · e311b51
1 parent c9e32d8
commit e311b51
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/src/manager/App.tsx b/src/manager/App.tsx
@@ -1,4 +1,4 @@
-import { Box, Theme as RadixTheme, Tabs } from "@radix-ui/themes";
+import { Box, Flex, Theme as RadixTheme, Tabs } from "@radix-ui/themes";
 import { Toaster } from "sonner";
 import {
   useAppSettingsStore,
@@ -47,22 +47,22 @@ const App = () => {
       />
       <ThemeToggler theme={theme} />
       <Tabs.Root defaultValue="widgets" asChild>
-        <Box height="100%" p="2">
+        <Flex direction="column" gap="2" height="100%" p="2">
           <Tabs.List>
             {tabs.map((tab) => (
               <Tabs.Trigger key={tab.value} value={tab.value}>
                 {tab.label}
               </Tabs.Trigger>
             ))}
           </Tabs.List>
-          <Box px="1" py="3" css={{ height: "calc(100% - 40px)" }}>
+          <Box p="1" height="calc(100% - var(--space-8))">
             {tabs.map((tab) => (
               <Tabs.Content key={tab.value} value={tab.value} asChild>
                 <Box height="100%">{tab.content}</Box>
               </Tabs.Content>
             ))}
           </Box>
-        </Box>
+        </Flex>
       </Tabs.Root>
     </RadixTheme>
   );

diff --git a/src/manager/components/Widgets/index.tsx b/src/manager/components/Widgets/index.tsx
@@ -36,10 +36,8 @@ const WidgetsTab = memo(() => {
               direction="column"
               pl="2"
               gap="2"
-              css={{
-                width: "75%",
-                boxShadow: "inset 1px 0 0 0 var(--gray-a5)",
-              }}
+              width="75%"
+              css={{ boxShadow: "inset 1px 0 0 0 var(--gray-a5)" }}
             >
               <Header id={id} />
               <Config id={id} />