💄 Fix TopBar background on large screens

bugbakery · Jun 12, 2024 · 24642e9 · 24642e9
1 parent f178261
commit 24642e9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/frontend/src/common/top_bar.tsx b/frontend/src/common/top_bar.tsx
@@ -11,15 +11,27 @@ import { showModal } from '../components/modal';
 import { ChangePasswordModal } from '../components/change_password';
 import { useAuthData } from '../utils/auth';
 
-export const TopBar = primitiveWithClassname(
+const TopBarBg = primitiveWithClassname(
   'div',
-  clsx(
-    'sticky top-0 z-10',
-    '-mx-6 px-6 -mt-2 mb-6 py-2',
-    'flex items-center gap-4 justify-between',
-    'bg-white dark:bg-neutral-900',
-  ),
+  clsx('fixed left-0 right-0 top-0 bg-black h-12 -z-10 bg-white dark:bg-neutral-900'),
 );
+
+export function TopBar({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div
+      className={clsx(
+        'sticky top-0 z-10',
+        '-mx-6 px-6 -mt-2 mb-6 py-2',
+        'flex items-center gap-4 justify-between',
+        'bg-white dark:bg-neutral-900',
+        className,
+      )}
+    >
+      <TopBarBg />
+      {children}
+    </div>
+  );
+}
 export const TopBarTitle = primitiveWithClassname('h2', 'text-xl font-bold');
 export const TopBarPart = primitiveWithClassname('div', 'gap-4 flex items-center');
 

diff --git a/frontend/src/pages/document.tsx b/frontend/src/pages/document.tsx
@@ -136,7 +136,7 @@ export function DocumentPage({
       <Helmet>
         <title>{data?.name}</title>
       </Helmet>
-      <TopBar className="!items-start z-40 relative">
+      <TopBar className="!items-start z-40">
         <TopBarPart className={isLoggedIn ? 'sticky left-4 -ml-12 !items-start' : ''}>
           {isLoggedIn && (
             <IconButton