refactor: simplify layout with sticky positioning and CSS utilities

app/(root)/layout.tsx

@@ -3,11 +3,6 @@ import { DesktopTopBar } from "@/components/navigation/desktop-top-bar";
 import { LeftSidebar } from "@/components/navigation/left-sidebar";
 import { MobileTopBar } from "@/components/navigation/mobile-top-bar";
 import { SidebarProvider } from "@/components/ui/sidebar";
-import {
-  cn,
-  LAYOUT_HORIZONTAL_PADDING,
-  MOBILE_TOP_BAR_OFFSET,
-} from "@/lib/utils";
 
 const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   const cookieStore = await cookies();
@@ -16,25 +11,13 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
 
   return (
     <SidebarProvider defaultOpen={sidebarOpenFromCookie}>
-      {/* Mobile-only top bar */}
-      <MobileTopBar />
-
-      {/* Full-height sidebar */}
       <LeftSidebar />
 
       {/* Main content area */}
       <div className="flex min-h-screen flex-1 flex-col">
-        {/* Desktop-only top bar */}
+        <MobileTopBar />
         <DesktopTopBar />
-        <main
-          className={cn(
-            "flex-1 pb-10 sm:pt-10",
-            MOBILE_TOP_BAR_OFFSET,
-            LAYOUT_HORIZONTAL_PADDING,
-          )}
-        >
-          {children}
-        </main>
+        <main className="flex-1 pb-10 pt-10 layout-padding-x">{children}</main>
       </div>
     </SidebarProvider>
   );

app/globals.css

@@ -204,4 +204,9 @@
   .invert-colors {
     @apply invert dark:invert-0;
   }
+
+  /* Consistent horizontal padding for main content and top bar alignment */
+  .layout-padding-x {
+    @apply px-6 md:px-8 lg:px-12;
+  }
 }

components/navigation/desktop-top-bar.tsx

@@ -1,15 +1,14 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { cn, LAYOUT_HORIZONTAL_PADDING, TOP_BAR_HEIGHT } from "@/lib/utils";
+import { cn, TOP_BAR_HEIGHT } from "@/lib/utils";
 
 export function DesktopTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex",
+        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex layout-padding-x",
         TOP_BAR_HEIGHT,
-        LAYOUT_HORIZONTAL_PADDING,
       )}
     >
       <div className="flex flex-1 justify-center">

components/navigation/left-sidebar.tsx

@@ -25,15 +25,17 @@ import {
   isRouteActive,
   NAV_LINK_ACTIVE_CLASSES,
   NAV_LINK_INACTIVE_CLASSES,
+  TOP_BAR_HEIGHT,
 } from "@/lib/utils";
 
 export function LeftSidebar() {
   const pathname = usePathname();
 
   return (
     <Sidebar id="left-sidebar" collapsible="icon">
-      {/* Logo section - h-14 matches top bar height */}
-      <SidebarHeader className="h-14 flex-row items-center px-3">
+      <SidebarHeader
+        className={cn(TOP_BAR_HEIGHT, "flex-row items-center px-3")}
+      >
         <Link
           href="/"
           aria-label="DevFlow sidebar logo"

components/navigation/mobile-top-bar.tsx

@@ -7,7 +7,7 @@ export function MobileTopBar() {
   return (
     <header
       className={cn(
-        "fixed top-0 z-50 flex w-full items-center justify-between bg-sidebar px-4 shadow-sm sm:hidden",
+        "sticky top-0 z-40 flex w-full items-center justify-between bg-sidebar px-4 shadow-sm sm:hidden",
         TOP_BAR_HEIGHT,
       )}
     >

lib/utils.ts

@@ -19,9 +19,7 @@ export const NAV_LINK_ACTIVE_CLASSES =
 export const NAV_LINK_INACTIVE_CLASSES = "font-medium";
 
 // Layout constants - shared between top bars and main content
-export const LAYOUT_HORIZONTAL_PADDING = "px-6 md:px-8 lg:px-12";
 export const TOP_BAR_HEIGHT = "h-14";
-export const MOBILE_TOP_BAR_OFFSET = "pt-14"; // Compensates for fixed mobile top bar
 
 /**
  * Get icon classes for navigation items (handles inversion for inactive state).