refactor: chromeless navigation design and layout alignment

app/(root)/layout.tsx → app/(app)/layout.tsx

@@ -21,8 +21,8 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
 
         {/* Content + Right Sidebar row */}
         <div className="flex flex-1">
-          <main className="flex-1 pb-10 pt-10 layout-padding-x">
-            {children}
+          <main className="flex-1 px-6 pb-10 pt-12 md:px-8 lg:px-12">
+            <div className="mx-auto w-full max-w-5xl">{children}</div>
           </main>
           <RightSidebar />
         </div>

app/globals.css

@@ -69,6 +69,7 @@
 :root {
   /* Layout */
   --top-bar-height: 4rem; /* 64px — desktop & mobile top navigation */
+  --right-sidebar-width: 22rem; /* 352px — right sidebar width at xl+ */
 
   /* Base */
   --radius: 0.625rem;
@@ -256,11 +257,6 @@
     @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;
-  }
-
   /* Subtle directional shadow for navigation edges (light mode only) */
   .shadow-light {
     box-shadow: -10px 10px 20px 0px oklch(0.877 0.006 17.26 / 10%);

components/navigation/desktop-topbar.tsx

@@ -4,12 +4,16 @@ import { Button } from "@/components/ui/button";
 
 export function DesktopTopBar() {
   return (
-    <header className="sticky top-0 z-40 hidden h-(--top-bar-height) items-center gap-4 shadow-light bg-sidebar sm:flex layout-padding-x">
-      <div className="flex flex-1 justify-center">
-        <p className="text-muted-foreground">Global Search</p>
+    <header className="sticky top-0 z-40 hidden h-(--top-bar-height) items-center bg-background sm:flex">
+      {/* Left section: matches main content structure (padding + max-w-5xl centering) */}
+      <div className="flex flex-1 items-center px-6 md:px-8 lg:px-12">
+        <div className="mx-auto w-full max-w-5xl">
+          <p className="hidden text-muted-foreground lg:block">Global Search</p>
+        </div>
       </div>
 
-      <div className="flex flex-none items-center gap-2">
+      {/* Right section: matches right sidebar width on xl */}
+      <div className="flex flex-none items-center justify-end gap-2 px-6 xl:w-(--right-sidebar-width)">
         <ThemeToggle />
         <SignedOut>
           <SignInButton>

components/navigation/mobile-topbar.tsx

@@ -4,7 +4,7 @@ import { ThemeToggle } from "@/components/navigation/theme-toggle";
 
 export function MobileTopBar() {
   return (
-    <header className="sticky top-0 z-40 flex h-(--top-bar-height) w-full items-center justify-between bg-sidebar px-4 shadow-light sm:hidden">
+    <header className="sticky top-0 z-40 flex h-(--top-bar-height) w-full items-center justify-between bg-background px-4 sm:hidden">
       <Link href="/" aria-label="DevFlow mobile logo">
         {/* biome-ignore lint/a11y/useAltText: Decorative logo, aria-label on parent link */}
         {/* biome-ignore lint/performance/noImgElement: SVG logo doesn't benefit from next/image optimisation */}

components/right-sidebar/right-sidebar.tsx

@@ -27,8 +27,8 @@ export async function RightSidebar() {
         id="right-sidebar"
         side="right"
         collapsible="none"
-        width="22rem"
-        className="border-l shadow-light"
+        width="var(--right-sidebar-width)"
+        className="border-l bg-background"
       >
         <SidebarContent className="mr-4 pb-6">
           <SidebarGroup className={GROUP_PADDING}>

components/tag-link.tsx

@@ -23,7 +23,7 @@ export function TagLink({
       href={`/tags/${name}`}
       className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
     >
-      <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+      <Badge className="flex items-center gap-1.5 rounded-md border-border bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text) dark:border-transparent">
         {showIcon &&
           (iconClass ? (
             <i className={iconClass} aria-hidden="true" />