fix: insights menu point alignment (#6847)

What is says on the tin

Closes
[1-2288](https://linear.app/unleash/issue/1-2288/misalignment-insights-beta-menu-item)

<img width="1429" alt="Screenshot 2024-04-12 at 14 42 28"
src="https://github.com/Unleash/unleash/assets/104830839/6b428e6f-e3b7-42e5-aa6b-c807338f5231">

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/menu/Header/Header.tsx

@@ -117,14 +117,20 @@ const styledIconProps = (theme: Theme) => ({
 
 const StyledLink = styled(Link)(({ theme }) => focusable(theme));
 
+const StyledText = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+
 const StyledLinkWithBetaBadge = ({
     title,
     to,
 }: { title: string; to: string }) => (
     <StyledLink to={to} sx={{ margin: 0 }}>
-        <div>
+        <StyledText>
             <span>{title}</span> <Badge color='success'>Beta</Badge>
-        </div>
+        </StyledText>
     </StyledLink>
 );