style(website): minor styling adjustments to account-dropdown

Author: GerilLeto

website/src/components/account-dropdown/index.tsx

@@ -1,4 +1,4 @@
-import { Group, Menu, Text, UnstyledButton } from '@mantine/core';
+import { Group, Menu, Stack, Text, UnstyledButton } from '@mantine/core';
 import { useBoolean } from 'ahooks';
 import { forwardRef } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -32,15 +32,16 @@ const UserButton = forwardRef<HTMLButtonElement, UserButtonProps>(
       {...rest}
     >
       <Group>
-        <div style={{ flex: 1 }}>
+        <Stack spacing={0} style={{ flex: 1 }}>
           <Text size="sm" weight={500}>
             {username}
           </Text>
-
-          <Text color="dimmed" size="xs">
-            {email}
-          </Text>
-        </div>
+          {email && (
+            <Text mt={-4} color="dimmed" size={11}>
+              {email}
+            </Text>
+          )}
+        </Stack>
 
         <ChevronRight size={16} />
       </Group>

website/src/frames/admin/index.tsx

@@ -30,7 +30,7 @@ export function AdminFrame() {
       }}
     >
       <MantineProvider>
-        <Group position="apart" px={10} sx={{ height: '40px', borderBottom: '0.0625rem solid #e9ecef' }}>
+        <Group position="apart" pl={10} sx={{ height: '40px', borderBottom: '0.0625rem solid #e9ecef' }}>
           <Group position="left">
             {/* should place breadcrumbs here */}
             <AdminBreadcrumbs />

website/src/frames/app/index.tsx

@@ -47,7 +47,7 @@ export function App() {
         }}
       >
         <MantineProvider>
-          <Group position="apart" px={10} sx={{ height: '40px', borderBottom: '0.0625rem solid #e9ecef' }}>
+          <Group position="apart" pl={10} sx={{ height: '40px', borderBottom: '0.0625rem solid #e9ecef' }}>
             <Group position="left">
               <NavbarToggler collapsed={navbarCollapsed} expand={setFalse} />
               <DashboardBreadcrumbs />