feat(layout): integrate dynamic header height based on showBaseHeader state

src/routes/__root.tsx

@@ -4,18 +4,27 @@ import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Toaster } from '@/components/ui/sonner'
 import { AuthProvider } from '@/pages/auth'
 import { TooltipProvider } from '@/components/ui/tooltip'
+import { useLayoutStore } from '@/pages/auth/store';
+import { useShallow } from 'zustand/shallow';
+import clsx from 'clsx';
 export const Route = createRootRoute({
   component: RootComponent,
 })
 
 
 function RootComponent() {
+  const store = useLayoutStore(useShallow(state => ({
+    showBaseHeader: state.showBaseHeader,
+  })));
   return (
     <div className='h-full overflow-hidden'>
       <LayoutMain />
       <AuthProvider mustLogin={true}>
         <TooltipProvider>
-          <main className='h-[calc(100%-3rem)] overflow-auto scrollbar'>
+          <main className={clsx('overflow-auto scrollbar', {
+            'h-[calc(100%-3rem)]': store.showBaseHeader,
+            'h-full': !store.showBaseHeader,
+          })}>
             <Outlet />
           </main>
         </TooltipProvider>