Fix minor UI issues (#1382)

Author: elizabetdev

.changeset/fix-minor-ui-issues.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Fix minor UI issues and enhance styling across various components

packages/app/.storybook/preview.tsx

@@ -16,16 +16,40 @@ import '../styles/app.scss';
 import { meHandler } from '../src/mocks/handlers';
 import { ThemeWrapper } from '../src/ThemeWrapper';
 
+export const parameters = {
+  layout: 'fullscreen',
+  options: {
+    showPanel: false,
+    storySort: (a, b) =>
+      a.title.localeCompare(b.title, undefined, { numeric: true }),
+  },
+};
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Mantine color scheme',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'mirror',
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' },
+      ],
+    },
+  },
+};
+
 initialize();
 
 const queryClient = new QueryClient();
 
 const preview: Preview = {
   decorators: [
-    Story => (
+    (Story, context) => (
       <QueryClientProvider client={queryClient}>
         <QueryParamProvider adapter={NextAdapter}>
-          <ThemeWrapper>
+          <ThemeWrapper colorScheme={context.globals.theme || 'light'}>
             <Story />
           </ThemeWrapper>
         </QueryParamProvider>
@@ -37,6 +61,7 @@ const preview: Preview = {
     msw: {
       handlers: [meHandler],
     },
+    backgrounds: { disable: true },
   },
 };
 

packages/app/package.json

@@ -111,6 +111,7 @@
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
     "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-themes": "^10.0.8",
     "@storybook/blocks": "^8.1.5",
     "@storybook/nextjs": "^8.1.5",
     "@storybook/react": "^8.1.5",

packages/app/src/AppNav.components.tsx

@@ -293,7 +293,7 @@ export const AppNavLink = ({
   const testId = `nav-link-${href.replace(/^\//, '').replace(/\//g, '-') || 'home'}`;
 
   return (
-    <Group justify="space-between" px="md" py="6px">
+    <Group justify="space-between" px="md" py="6px" h="34px">
       <Link
         data-testid={testId}
         href={href}

packages/app/src/AppNav.tsx

@@ -409,6 +409,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
   const isCollapsed = isSmallScreen || isPreferCollapsed;
 
   const navWidth = isCollapsed ? 50 : 230;
+  const navHeaderStyle = isCollapsed ? undefined : { height: 58 };
 
   useEffect(() => {
     HyperDX.addAction('user navigated', {
@@ -604,7 +605,10 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         }}
       >
         <div style={{ width: navWidth }}>
-          <div className="p-3 d-flex flex-wrap justify-content-between align-items-center">
+          <div
+            className="p-3 d-flex flex-wrap justify-content-between align-items-center"
+            style={navHeaderStyle}
+          >
             <Link href="/search" className="text-decoration-none">
               {isCollapsed ? (
                 <div style={{ marginLeft: '-0.15rem' }}>

packages/app/src/LandingHeader.tsx

@@ -30,7 +30,7 @@ export default function LandingHeader({
           right: 0,
           background: 'var(--color-bg-body)',
           backdropFilter: 'blur(12px)',
-          border: '1px solid var(--color-border)',
+          borderBottom: '1px solid var(--color-border)',
           zIndex: 100,
         }}
       >
@@ -47,12 +47,13 @@ export default function LandingHeader({
               color="white"
             />
 
-            <Group gap="md" visibleFrom="lg" style={{ fontSize: 14 }}>
+            <Group gap="lg" visibleFrom="lg">
               <Anchor
                 href="https://hyperdx.io"
                 c={activeKey === 'cloud' ? 'green' : 'gray'}
                 underline="never"
                 style={{ fontWeight: activeKey === 'cloud' ? 600 : 400 }}
+                size="sm"
               >
                 HyperDX Cloud
               </Anchor>
@@ -61,6 +62,7 @@ export default function LandingHeader({
                 c={activeKey === 'docs' ? 'green' : 'gray'}
                 underline="never"
                 style={{ fontWeight: activeKey === 'docs' ? 600 : 400 }}
+                size="sm"
               >
                 Docs
               </Anchor>
@@ -70,6 +72,7 @@ export default function LandingHeader({
                   c={activeKey === '/login' ? 'green' : 'gray'}
                   underline="never"
                   style={{ fontWeight: activeKey === '/login' ? 600 : 400 }}
+                  size="sm"
                 >
                   Login
                 </Anchor>