fix: insights menu point alignment

Signed-off-by: andreas-unleash <[email protected]>
Unleash · Apr 12, 2024 · d98f35b · d98f35b
1 parent 34e917f
commit d98f35b
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
@@ -9,6 +9,7 @@ import {
     styled,
     type Theme,
     Box,
+    Typography,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -122,9 +123,16 @@ const StyledLinkWithBetaBadge = ({
     to,
 }: { title: string; to: string }) => (
     <StyledLink to={to} sx={{ margin: 0 }}>
-        <div>
+        <Typography
+            component='div'
+            sx={(theme) => ({
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing(1),
+            })}
+        >
             <span>{title}</span> <Badge color='success'>Beta</Badge>
-        </div>
+        </Typography>
     </StyledLink>
 );