From 8f03aba6cfc3c91876f26ac8c062db7170b435e7 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Mon, 29 Dec 2025 16:42:32 +0400
Subject: [PATCH 1/9] style: use sidebar background colour for desktop top bar

Changes bg-background to bg-sidebar on the desktop header component.

Aligns the top bar with the sidebar colour scheme for visual consistency across
the navigation areas.
---
 components/navigation/desktop-top-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/navigation/desktop-top-bar.tsx b/components/navigation/desktop-top-bar.tsx
index 65ddf30..e4f7354 100644
--- a/components/navigation/desktop-top-bar.tsx
+++ b/components/navigation/desktop-top-bar.tsx
@@ -7,7 +7,7 @@ export function DesktopTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex layout-padding-x",
+        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-sidebar sm:flex layout-padding-x",
         TOP_BAR_HEIGHT,
       )}
     >

From ec3e32dd516c3f8a49410406a95149c2839bebc2 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Mon, 29 Dec 2025 16:43:28 +0400
Subject: [PATCH 2/9] style: organise CSS variables with section headers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

globals.css:
- Group variables by origin: shadcn/ui Core, Charts, Sidebar, Custom
- Reorder @theme inline variables logically (was reverse alphabetical)
- Add section headers throughout :root and .dark blocks
- Format @layer declaration across multiple lines

No CSS values changed. Purely organisational refactor for maintainability.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/globals.css | 114 ++++++++++++++++++++++++++++++++----------------
 1 file changed, 76 insertions(+), 38 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 9707fab..4a0f841 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,4 +1,8 @@
-@layer theme, base, clerk, components, utilities; /* Must be at top */
+@layer theme,
+  base,
+  clerk,
+  components,
+  utilities; /* Declare layer order before imports (adds "clerk" layer) */
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "@clerk/themes/shadcn.css";
@@ -6,60 +10,68 @@
 /* Applies dark: styles when element is .dark or inside .dark */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Registers theme tokens → generates utilities (bg-*, text-*, border-*, etc.).
+   "inline" embeds values directly, required when referencing other vars to avoid CSS scope issues. */
 @theme inline {
-  /* Register theme tokens with Tailwind so it generates utilities (bg-*, text-*, etc.) */
-  /* E.g. --color-background → bg-background, text-background, border-background, etc. */
-  /* "inline" (v4) means values are embedded here, not in a separate CSS layer */
+  /* Fonts (no mode variants) */
   --font-display: var(--font-space-grotesk), Arial, sans-serif;
   --font-sans-serif: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
   --font-mono: var(--font-jetbrains-mono), ui-monospace, Menlo, monospace;
 
+  /* Radius (derived from --radius) */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
+  /* shadcn/ui: Core */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* shadcn/ui: Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* shadcn/ui: Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 
-  /* NOT SHADCN VARIABLES */
+  /* Custom */
   --color-mobile-nav: var(--mobile-nav);
   --color-overlay: var(--overlay);
 }
 
+/* Raw CSS variables (no Tailwind utilities generated). Access via var(--background), etc. */
 :root {
-  /* Creates CSS variables available to all elements (no utility generation) */
+  /* Base */
   --radius: 0.625rem;
 
+  /* shadcn/ui: Core */
   --background: oklch(0.994 0 0); /* #FDFDFD */
   --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
@@ -78,11 +90,15 @@
   --border: oklch(0.929 0.013 255.508);
   --input: oklch(0.929 0.013 255.508);
   --ring: oklch(0.704 0.04 256.788);
+
+  /* shadcn/ui: Charts */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
+
+  /* shadcn/ui: Sidebar */
   --sidebar: oklch(1 0 0); /* Figma #ffffff */
   --sidebar-foreground: oklch(0.2102 0.0185 270.39); /* #151821 */
   --sidebar-primary: oklch(0.208 0.042 265.755);
@@ -92,21 +108,29 @@
   --sidebar-border: oklch(0.929 0.013 255.508);
   --sidebar-ring: oklch(0.704 0.04 256.788);
 
-  /* NOT SHADCN VARIABLES */
+  /* Custom: Gradients */
   --primary-gradient-to: oklch(0.7434 0.115 58.23); /* #E2995F */
   --gradient-primary: linear-gradient(
     93.22deg,
     var(--primary) -13.95%,
     var(--primary-gradient-to) 99.54%
   );
+
+  /* Custom: Navigation */
   --mobile-nav: oklch(1 0 0); /* #FFFFFF */
   --overlay: oklch(0 0 0); /* black, both modes */
+
+  /* Custom: Assets (theme-aware URLs) */
   --logo-full-themed: url("/images/logo-light.svg");
   --auth-bg: url("/images/auth-bg-light.webp");
 }
 
+/* Dark mode overrides — these values take precedence over :root when .dark is active */
 .dark {
-  /* Overrides CSS variables when .dark class is present */
+  /* Base */
+  --radius: 0.625rem; /* same as root */
+
+  /* shadcn/ui: Core */
   --background: oklch(0 0 0); /* #000000 */
   --foreground: oklch(0.984 0.003 247.858);
   --card: oklch(0.1783 0.0128 270.6); /* #0F1117 */
@@ -125,11 +149,15 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);
+
+  /* shadcn/ui: Charts */
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
+
+  /* shadcn/ui: Sidebar */
   --sidebar: oklch(0.1783 0.0128 270.6); /* Figma #0F1117 */
   --sidebar-foreground: oklch(1 0 0); /* #FFFFFF */
   --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -139,9 +167,19 @@
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.551 0.027 264.364);
 
-  /* NOT SHADCN VARIABLES */
+  /* Custom: Gradients */
+  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* same as root */
+  --gradient-primary: linear-gradient(
+    93.22deg,
+    var(--primary) -13.95%,
+    var(--primary-gradient-to) 99.54%
+  ); /* same as root */
+
+  /* Custom: Navigation */
   --mobile-nav: oklch(0.1288 0.0406 264.7); /* #07080b */
-  --overlay: oklch(0 0 0); /* black, both modes */
+  --overlay: oklch(0 0 0); /* same as root */
+
+  /* Custom: Assets (theme-aware URLs) */
   --logo-full-themed: url("/images/logo-dark.svg");
   --auth-bg: url("/images/auth-bg-dark.webp");
 }

From dfa65c30ca8ee56e34d3156d926a7c6f8fb7fffe Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Tue, 30 Dec 2025 00:31:44 +0400
Subject: [PATCH 3/9] style: add shadow-light utility and standardise top bar
 styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS Variables:

- Darken page background lightness from 0.994 to 0.99
- Set sidebar-border to match card colour in light mode, transparent in dark

Utilities:

- Add shadow-light class for subtle directional shadow (light mode only)

Navigation:

- Replace border-b on desktop top bar with shadow-light
- Replace shadow-sm on mobile top bar with shadow-light

Provides consistent visual separation for navigation elements while reducing
visual weight in dark mode where borders are now transparent.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/globals.css                           | 14 +++++++++++---
 components/navigation/desktop-top-bar.tsx |  2 +-
 components/navigation/mobile-top-bar.tsx  |  2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 4a0f841..6d6a25f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -72,7 +72,7 @@
   --radius: 0.625rem;
 
   /* shadcn/ui: Core */
-  --background: oklch(0.994 0 0); /* #FDFDFD */
+  --background: oklch(0.99 0 0); /* #FDFDFD */
   --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
   --card-foreground: oklch(0.129 0.042 264.695);
@@ -105,7 +105,7 @@
   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
   --sidebar-accent: oklch(0.968 0.007 247.896);
   --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-border: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
   --sidebar-ring: oklch(0.704 0.04 256.788);
 
   /* Custom: Gradients */
@@ -164,7 +164,7 @@
   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
   --sidebar-accent: oklch(0.279 0.041 260.031);
   --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-border: transparent;
   --sidebar-ring: oklch(0.551 0.027 264.364);
 
   /* Custom: Gradients */
@@ -247,4 +247,12 @@
   .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%);
+  }
+  .dark .shadow-light {
+    box-shadow: none;
+  }
 }
diff --git a/components/navigation/desktop-top-bar.tsx b/components/navigation/desktop-top-bar.tsx
index e4f7354..d4bbbfb 100644
--- a/components/navigation/desktop-top-bar.tsx
+++ b/components/navigation/desktop-top-bar.tsx
@@ -7,7 +7,7 @@ export function DesktopTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-sidebar sm:flex layout-padding-x",
+        "sticky top-0 z-40 hidden items-center gap-4 shadow-light bg-sidebar sm:flex layout-padding-x",
         TOP_BAR_HEIGHT,
       )}
     >
diff --git a/components/navigation/mobile-top-bar.tsx b/components/navigation/mobile-top-bar.tsx
index 52d82bf..23ea493 100644
--- a/components/navigation/mobile-top-bar.tsx
+++ b/components/navigation/mobile-top-bar.tsx
@@ -7,7 +7,7 @@ export function MobileTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 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-light sm:hidden",
         TOP_BAR_HEIGHT,
       )}
     >

From 7c7948f5195f10c160c6f6e555b4019786019972 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Tue, 30 Dec 2025 13:37:46 +0400
Subject: [PATCH 4/9] chore: disable MD060 compact table style rule

Allows tables without space before pipe characters, matching the project's
preferred compact markdown style.
---
 .markdownlint.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.markdownlint.yaml b/.markdownlint.yaml
index 1255d4a..e567733 100644
--- a/.markdownlint.yaml
+++ b/.markdownlint.yaml
@@ -9,3 +9,4 @@ MD036: false  # Allow emphasis (bold/italic) without treating it as heading
 MD040: false  # Fenced code blocks don't need language specified
 MD041: false  # First line doesn't need to be h1
 MD029: false  # Allow any ordered list style (1/2/3 or continuous numbering)
+MD060: false  # Allow compact table style (no space before pipe)

From da6404cb7cc88252a1b65fd48c3d5bf988445b93 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Tue, 30 Dec 2025 20:08:06 +0400
Subject: [PATCH 5/9] test: add URL-based fallback for Clerk OTP detection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auth Flow Tests:

- Add URL check for "factor-two" as backup when heading text varies
- Replace hamburgerButton with userMenu as auth success indicator (mobile)
- Remove brittle toHaveURL("/") assertion that fails during 2FA redirect

Clerk's OTP/2FA behaviour is non-deterministic; sometimes it prompts, sometimes it
doesn't. Using URL pattern matching alongside heading detection makes tests resilient
to Clerk's varying UI states.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 e2e/authenticated.desktop.spec.ts | 10 +++++----
 e2e/authenticated.mobile.spec.ts  | 35 +++++++++++++------------------
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/e2e/authenticated.desktop.spec.ts b/e2e/authenticated.desktop.spec.ts
index dac6c84..7af350a 100644
--- a/e2e/authenticated.desktop.spec.ts
+++ b/e2e/authenticated.desktop.spec.ts
@@ -37,16 +37,18 @@ test.describe("Authenticated User Flow - Desktop", () => {
     const twoFactorHeading = page.getByRole("heading", {
       name: /verification|two-step/i,
     });
+    // UserButton only appears when authenticated (not visible on sign-in pages)
     const userMenu = page.getByRole("button", { name: "Open user menu" });
     await expect(
       emailOtpHeading.or(twoFactorHeading).or(userMenu),
     ).toBeVisible();
 
-    // Handle email OTP or 2FA - both use the same OTP input pattern
-    if (
+    // Check URL for "factor-two" as backup (Clerk heading text may vary)
+    const needsOtp =
       (await emailOtpHeading.isVisible()) ||
-      (await twoFactorHeading.isVisible())
-    ) {
+      (await twoFactorHeading.isVisible()) ||
+      page.url().includes("factor-two");
+    if (needsOtp) {
       await page.getByRole("textbox").first().click();
       await page.keyboard.type(TEST_OTP);
     }
diff --git a/e2e/authenticated.mobile.spec.ts b/e2e/authenticated.mobile.spec.ts
index 2fd5c3a..9c346da 100644
--- a/e2e/authenticated.mobile.spec.ts
+++ b/e2e/authenticated.mobile.spec.ts
@@ -25,14 +25,17 @@ test.describe("Authenticated User Flow - Mobile", () => {
     // Open hamburger menu
     await page.getByRole("button", { name: /open navigation/i }).click();
 
-    // Click Sign in button in mobile menu
+    // Sign in button is inside the mobile menu drawer
     await page.getByRole("button", { name: "Sign in" }).click();
 
-    // Complete sign in flow
+    // Fill Clerk's sign-in form (redirected to Clerk's sign-in page)
     await page.getByRole("textbox", { name: "Email address" }).fill(TEST_EMAIL);
     await page.getByRole("textbox", { name: "Password" }).fill(TEST_PASSWORD);
     await page.getByRole("button", { name: "Continue", exact: true }).click();
 
+    // UserButton only appears when authenticated (not visible on sign-in pages)
+    const userMenu = page.getByRole("button", { name: "Open user menu" });
+
     // Handle OTP/2FA if required
     // - "Check your email" = new device verification (email OTP)
     // - "Two-step verification" or URL contains "factor-two" = 2FA/TOTP
@@ -42,34 +45,26 @@ test.describe("Authenticated User Flow - Mobile", () => {
     const twoFactorHeading = page.getByRole("heading", {
       name: /verification|two-step/i,
     });
-    const hamburgerButton = page.getByRole("button", {
-      name: /open navigation/i,
-    });
     await expect(
-      emailOtpHeading.or(twoFactorHeading).or(hamburgerButton),
+      emailOtpHeading.or(twoFactorHeading).or(userMenu),
     ).toBeVisible();
 
-    // Handle email OTP or 2FA - both use the same OTP input pattern
-    if (
+    // Check URL for "factor-two" as backup (Clerk heading text may vary)
+    const needsOtp =
       (await emailOtpHeading.isVisible()) ||
-      (await twoFactorHeading.isVisible())
-    ) {
+      (await twoFactorHeading.isVisible()) ||
+      page.url().includes("factor-two");
+    if (needsOtp) {
       await page.getByRole("textbox").first().click();
       await page.keyboard.type(TEST_OTP);
     }
 
-    // Wait for redirect to home after auth
-    await expect(page).toHaveURL("/");
-
     // === MANAGE ACCOUNT VIA MOBILE MENU ===
-    // Open hamburger menu
+    // Open hamburger menu and verify authenticated (userMenu only shows when signed in)
     await page.getByRole("button", { name: /open navigation/i }).click();
-
-    // UserButton should be visible at bottom of mobile menu
-    const userMenu = page.getByRole("button", { name: "Open user menu" });
     await expect(userMenu).toBeVisible();
 
-    // Click UserButton and select "Manage account"
+    // UserButton opens Clerk's user menu dropdown
     await userMenu.click();
     await page.getByRole("menuitem", { name: "Manage account" }).click();
 
@@ -88,10 +83,10 @@ test.describe("Authenticated User Flow - Mobile", () => {
     await expect(profileHeading).not.toBeVisible();
 
     // === SIGN OUT VIA MOBILE MENU ===
-    // Reopen hamburger menu
+    // Menu closed after modal interaction, reopen it
     await page.getByRole("button", { name: /open navigation/i }).click();
 
-    // Click UserButton and sign out
+    // UserButton is visible again in the reopened menu
     await userMenu.click();
     await page.getByRole("menuitem", { name: "Sign out" }).click();
 

From 440c6448c23afc5c11a4f1466a462cf0530b31c8 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Tue, 30 Dec 2025 20:49:28 +0400
Subject: [PATCH 6/9] feat(layout): add right sidebar with three-column layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Right Sidebar:
- Add RightSidebar component with Top Questions and Popular Tags sections
- Visible only on xl: breakpoint (≥1280px), hidden on smaller screens
- Sticky positioning below top bar with viewport-aware height calc

┌────────────────────────────────────┐
│      │    DesktopTopBar            │
│      ├─────────────────────┬───────│
│ Left │                     │ Right │
│ Side │    Page Content     │ Side  │
│ bar  │     {children}      │ bar   │
│      │                     │       │
└──────┴─────────────────────┴───────┘

Layout & Navigation:
- Restructure root layout to three-column flex (left sidebar | main | right)
- Migrate top bar height from TypeScript constant to CSS variable
- Add configurable width prop to Sidebar component
- Style scrollbars with ultra-thin theme-aware appearance (WebKit + Firefox)

Typography:
- Replace element-based heading styles with utility classes (.text-heading-*)
- Decouples visual heading size from semantic HTML level

Establishes foundation for the right sidebar feature. CSS variable approach
centralises layout dimensions for consistent spacing across navigation components.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/(root)/ask-question/page.tsx          |  2 +-
 app/(root)/collections/page.tsx           |  2 +-
 app/(root)/community/page.tsx             |  2 +-
 app/(root)/jobs/page.tsx                  |  2 +-
 app/(root)/layout.tsx                     | 10 +++-
 app/(root)/page.tsx                       |  4 +-
 app/(root)/profile/page.tsx               |  2 +-
 app/(root)/tags/page.tsx                  |  2 +-
 app/globals.css                           | 44 +++++++++-------
 components/navigation/desktop-top-bar.tsx |  5 +-
 components/navigation/left-sidebar.tsx    | 10 ++--
 components/navigation/mobile-top-bar.tsx  |  5 +-
 components/navigation/right-sidebar.tsx   | 64 +++++++++++++++++++++++
 components/ui/sidebar.tsx                 | 23 +++++++-
 lib/utils.ts                              |  3 --
 15 files changed, 140 insertions(+), 40 deletions(-)
 create mode 100644 components/navigation/right-sidebar.tsx

diff --git a/app/(root)/ask-question/page.tsx b/app/(root)/ask-question/page.tsx
index cc92fe1..2d38897 100644
--- a/app/(root)/ask-question/page.tsx
+++ b/app/(root)/ask-question/page.tsx
@@ -1,3 +1,3 @@
 export default function AskQuestionPage() {
-  return <h1>Ask a Question</h1>;
+  return <h1 className="text-heading-2xl">Ask a Question</h1>;
 }
diff --git a/app/(root)/collections/page.tsx b/app/(root)/collections/page.tsx
index 2a084a1..5420901 100644
--- a/app/(root)/collections/page.tsx
+++ b/app/(root)/collections/page.tsx
@@ -1,3 +1,3 @@
 export default function CollectionsPage() {
-  return <h1>Collections</h1>;
+  return <h1 className="text-heading-2xl">Collections</h1>;
 }
diff --git a/app/(root)/community/page.tsx b/app/(root)/community/page.tsx
index 863d62f..7c36b69 100644
--- a/app/(root)/community/page.tsx
+++ b/app/(root)/community/page.tsx
@@ -1,3 +1,3 @@
 export default function CommunityPage() {
-  return <h1>Community</h1>;
+  return <h1 className="text-heading-2xl">Community</h1>;
 }
diff --git a/app/(root)/jobs/page.tsx b/app/(root)/jobs/page.tsx
index ec6d850..aa7cfe8 100644
--- a/app/(root)/jobs/page.tsx
+++ b/app/(root)/jobs/page.tsx
@@ -1,3 +1,3 @@
 export default function JobsPage() {
-  return <h1>Find Jobs</h1>;
+  return <h1 className="text-heading-2xl">Find Jobs</h1>;
 }
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 0069033..f8d842c 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -2,6 +2,7 @@ import { cookies } from "next/headers";
 import { DesktopTopBar } from "@/components/navigation/desktop-top-bar";
 import { LeftSidebar } from "@/components/navigation/left-sidebar";
 import { MobileTopBar } from "@/components/navigation/mobile-top-bar";
+import { RightSidebar } from "@/components/navigation/right-sidebar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 
 const RootLayout = async ({ children }: { children: React.ReactNode }) => {
@@ -17,7 +18,14 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       <div className="flex min-h-screen flex-1 flex-col">
         <MobileTopBar />
         <DesktopTopBar />
-        <main className="flex-1 pb-10 pt-10 layout-padding-x">{children}</main>
+
+        {/* Content + Right Sidebar row */}
+        <div className="flex flex-1">
+          <main className="flex-1 pb-10 pt-10 layout-padding-x">
+            {children}
+          </main>
+          <RightSidebar />
+        </div>
       </div>
     </SidebarProvider>
   );
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index dd2a9c0..23eb7bc 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -1,6 +1,6 @@
 const HomePage = () => (
   <>
-    <h1>Hello Root page with heading H1</h1>
+    <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
 
     {/* Demo: top overflow test */}
     <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
@@ -42,7 +42,7 @@ const HomePage = () => (
             </span>
           </div>
 
-          <h2 className="mb-2 text-xl font-semibold">
+          <h2 className="text-heading-sm mb-2">
             How to implement a sticky sidebar in Next.js with Tailwind CSS?
           </h2>
 
diff --git a/app/(root)/profile/page.tsx b/app/(root)/profile/page.tsx
index e84a25b..0144d0c 100644
--- a/app/(root)/profile/page.tsx
+++ b/app/(root)/profile/page.tsx
@@ -1,3 +1,3 @@
 export default function ProfilePage() {
-  return <h1>Profile</h1>;
+  return <h1 className="text-heading-2xl">Profile</h1>;
 }
diff --git a/app/(root)/tags/page.tsx b/app/(root)/tags/page.tsx
index 4f47ff8..65e6017 100644
--- a/app/(root)/tags/page.tsx
+++ b/app/(root)/tags/page.tsx
@@ -1,3 +1,3 @@
 export default function TagsPage() {
-  return <h1>Tags</h1>;
+  return <h1 className="text-heading-2xl">Tags</h1>;
 }
diff --git a/app/globals.css b/app/globals.css
index 6d6a25f..6180cf6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -68,6 +68,9 @@
 
 /* Raw CSS variables (no Tailwind utilities generated). Access via var(--background), etc. */
 :root {
+  /* Layout */
+  --top-bar-height: 4rem; /* 64px — desktop & mobile top navigation */
+
   /* Base */
   --radius: 0.625rem;
 
@@ -201,24 +204,6 @@
   html {
     font-family: var(--font-sans-serif);
   }
-  h1 {
-    @apply text-5xl font-bold font-display;
-  }
-  h2 {
-    @apply text-4xl font-semibold font-display;
-  }
-  h3 {
-    @apply text-3xl font-semibold font-display;
-  }
-  h4 {
-    @apply text-2xl font-medium font-display;
-  }
-  h5 {
-    @apply text-xl font-medium font-display;
-  }
-  h6 {
-    @apply text-lg font-medium font-display;
-  }
 
   :is(code, kbd, samp, pre) {
     /* Code font family */
@@ -236,6 +221,29 @@
   }
 }
 
+@layer components {
+  /* Heading utilities — apply visual heading styles independent of h1-h6 level.
+     Usage: <h2 class="text-heading-sm"> renders an h2 with small heading styling. */
+  .text-heading-2xl {
+    @apply text-5xl font-bold font-display; /* 48px */
+  }
+  .text-heading-xl {
+    @apply text-4xl font-semibold font-display; /* 36px */
+  }
+  .text-heading-lg {
+    @apply text-3xl font-semibold font-display; /* 30px */
+  }
+  .text-heading-md {
+    @apply text-2xl font-medium font-display; /* 24px */
+  }
+  .text-heading-sm {
+    @apply text-xl font-medium font-display; /* 20px */
+  }
+  .text-heading-xs {
+    @apply text-lg font-medium font-display; /* 18px */
+  }
+}
+
 @layer utilities {
   /* Custom SVG icons use hardcoded white fill. Since <Image> loads them as external
      files, CSS currentColor won't work. Invert to black in light mode instead. */
diff --git a/components/navigation/desktop-top-bar.tsx b/components/navigation/desktop-top-bar.tsx
index d4bbbfb..f78e3b7 100644
--- a/components/navigation/desktop-top-bar.tsx
+++ b/components/navigation/desktop-top-bar.tsx
@@ -1,14 +1,13 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { cn, TOP_BAR_HEIGHT } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 
 export function DesktopTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 hidden items-center gap-4 shadow-light bg-sidebar sm:flex layout-padding-x",
-        TOP_BAR_HEIGHT,
+        "sticky top-0 z-40 hidden h-[var(--top-bar-height)] items-center gap-4 shadow-light bg-sidebar sm:flex layout-padding-x",
       )}
     >
       <div className="flex flex-1 justify-center">
diff --git a/components/navigation/left-sidebar.tsx b/components/navigation/left-sidebar.tsx
index 9358955..0291564 100644
--- a/components/navigation/left-sidebar.tsx
+++ b/components/navigation/left-sidebar.tsx
@@ -25,16 +25,20 @@ 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">
+    <Sidebar
+      id="left-sidebar"
+      collapsible="icon"
+      width="13rem"
+      className="shadow-light"
+    >
       <SidebarHeader
-        className={cn(TOP_BAR_HEIGHT, "flex-row items-center px-3")}
+        className={cn("h-[var(--top-bar-height)] flex-row items-center px-3")}
       >
         <Link
           href="/"
diff --git a/components/navigation/mobile-top-bar.tsx b/components/navigation/mobile-top-bar.tsx
index 23ea493..a8b00e8 100644
--- a/components/navigation/mobile-top-bar.tsx
+++ b/components/navigation/mobile-top-bar.tsx
@@ -1,14 +1,13 @@
 import Link from "next/link";
 import { MobileNav } from "@/components/navigation/mobile-nav";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
-import { cn, TOP_BAR_HEIGHT } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 
 export function MobileTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 flex w-full items-center justify-between bg-sidebar px-4 shadow-light sm:hidden",
-        TOP_BAR_HEIGHT,
+        "sticky top-0 z-40 flex h-[var(--top-bar-height)] w-full items-center justify-between bg-sidebar px-4 shadow-light sm:hidden",
       )}
     >
       <Link href="/" aria-label="DevFlow mobile logo">
diff --git a/components/navigation/right-sidebar.tsx b/components/navigation/right-sidebar.tsx
new file mode 100644
index 0000000..d74bf2d
--- /dev/null
+++ b/components/navigation/right-sidebar.tsx
@@ -0,0 +1,64 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/** Asymmetric padding: more on left, less on right (scrollbar side), reduced bottom */
+const GROUP_PADDING = "pt-6 pb-2 pl-6 pr-3";
+
+export function RightSidebar() {
+  // Uses var() syntax — variable not registered in @theme
+  return (
+    <aside
+      aria-label="Top questions and popular tags"
+      className="sticky top-[var(--top-bar-height)] hidden h-[calc(100svh-var(--top-bar-height))] self-start xl:block"
+    >
+      <Sidebar
+        id="right-sidebar"
+        side="right"
+        collapsible="none"
+        width="22rem"
+        className="border-l shadow-light"
+      >
+        <SidebarContent className="mr-4 pb-6">
+          <SidebarGroup className={GROUP_PADDING}>
+            <h2 className="text-heading-sm mb-4 text-foreground">
+              Top Questions
+            </h2>
+            <SidebarGroupContent>
+              <div className="space-y-6">
+                {Array.from({ length: 6 }, (_, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+                  <div key={i} className="space-y-3">
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-4 w-5/6" />
+                  </div>
+                ))}
+              </div>
+            </SidebarGroupContent>
+          </SidebarGroup>
+
+          <SidebarGroup className={GROUP_PADDING}>
+            <h2 className="text-heading-sm mb-4 text-foreground">
+              Popular Tags
+            </h2>
+            <SidebarGroupContent>
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-5/6" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-5/6" />
+              </div>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </aside>
+  );
+}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 7989101..e02a249 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -26,7 +26,7 @@ import { cn } from "@/lib/utils";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "14rem";
+const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
@@ -157,6 +157,7 @@ function Sidebar({
   side = "left",
   variant = "sidebar",
   collapsible = "offcanvas",
+  width,
   className,
   children,
   ...props
@@ -164,6 +165,7 @@ function Sidebar({
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
+  width?: string;
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
@@ -175,6 +177,11 @@ function Sidebar({
           "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
           className,
         )}
+        style={
+          width
+            ? ({ "--sidebar-width": width } as React.CSSProperties)
+            : undefined
+        }
         {...props}
       >
         {children}
@@ -215,6 +222,11 @@ function Sidebar({
       data-variant={variant}
       data-side={side}
       data-slot="sidebar"
+      style={
+        width
+          ? ({ "--sidebar-width": width } as React.CSSProperties)
+          : undefined
+      }
     >
       {/* This is what handles the sidebar gap on desktop */}
       <div
@@ -377,6 +389,15 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       data-sidebar="content"
       className={cn(
         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        // Ultra-thin scrollbar: Chrome, Safari, Edge (WebKit/Blink)
+        "[&::-webkit-scrollbar]:w-1",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        "[&::-webkit-scrollbar-thumb]:rounded-full",
+        "[&::-webkit-scrollbar-thumb]:bg-foreground/20",
+        "hover:[&::-webkit-scrollbar-thumb]:bg-foreground/40",
+        // Firefox fallback (standard CSS, only when WebKit unsupported)
+        "[@supports(not_selector(::-webkit-scrollbar))]:[scrollbar-width:thin]",
+        "[@supports(not_selector(::-webkit-scrollbar))]:[scrollbar-color:hsl(var(--foreground)/0.2)_transparent]",
         className,
       )}
       {...props}
diff --git a/lib/utils.ts b/lib/utils.ts
index b6a6868..8b03cf3 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -18,9 +18,6 @@ export const NAV_LINK_ACTIVE_CLASSES =
   "bg-(image:--gradient-primary) font-bold text-primary-foreground";
 export const NAV_LINK_INACTIVE_CLASSES = "font-medium";
 
-// Layout constants - shared between top bars and main content
-export const TOP_BAR_HEIGHT = "h-14";
-
 /**
  * Get icon classes for navigation items (handles inversion for inactive state).
  */

From 333e276ba122f87db49f371c13a03af14f983fd6 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Tue, 30 Dec 2025 21:27:12 +0400
Subject: [PATCH 7/9] style: use Tailwind v4 shorthand for CSS custom
 properties

Navigation components:
- Replace `[var(--top-bar-height)]` with `(--top-bar-height)` syntax
- Remove outdated comment about var() usage

Tailwind v4 supports direct CSS custom property references without explicit var()
wrapper. Produces identical CSS output with cleaner source.
---
 components/navigation/desktop-top-bar.tsx | 2 +-
 components/navigation/left-sidebar.tsx    | 2 +-
 components/navigation/mobile-top-bar.tsx  | 2 +-
 components/navigation/right-sidebar.tsx   | 3 +--
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/navigation/desktop-top-bar.tsx b/components/navigation/desktop-top-bar.tsx
index f78e3b7..1f0ac49 100644
--- a/components/navigation/desktop-top-bar.tsx
+++ b/components/navigation/desktop-top-bar.tsx
@@ -7,7 +7,7 @@ export function DesktopTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 hidden h-[var(--top-bar-height)] items-center gap-4 shadow-light bg-sidebar sm:flex layout-padding-x",
+        "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">
diff --git a/components/navigation/left-sidebar.tsx b/components/navigation/left-sidebar.tsx
index 0291564..487811c 100644
--- a/components/navigation/left-sidebar.tsx
+++ b/components/navigation/left-sidebar.tsx
@@ -38,7 +38,7 @@ export function LeftSidebar() {
       className="shadow-light"
     >
       <SidebarHeader
-        className={cn("h-[var(--top-bar-height)] flex-row items-center px-3")}
+        className={cn("h-(--top-bar-height) flex-row items-center px-3")}
       >
         <Link
           href="/"
diff --git a/components/navigation/mobile-top-bar.tsx b/components/navigation/mobile-top-bar.tsx
index a8b00e8..6f8e17e 100644
--- a/components/navigation/mobile-top-bar.tsx
+++ b/components/navigation/mobile-top-bar.tsx
@@ -7,7 +7,7 @@ export function MobileTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 flex h-[var(--top-bar-height)] w-full items-center justify-between bg-sidebar px-4 shadow-light sm:hidden",
+        "sticky top-0 z-40 flex h-(--top-bar-height) w-full items-center justify-between bg-sidebar px-4 shadow-light sm:hidden",
       )}
     >
       <Link href="/" aria-label="DevFlow mobile logo">
diff --git a/components/navigation/right-sidebar.tsx b/components/navigation/right-sidebar.tsx
index d74bf2d..50f8aed 100644
--- a/components/navigation/right-sidebar.tsx
+++ b/components/navigation/right-sidebar.tsx
@@ -10,11 +10,10 @@ import { Skeleton } from "@/components/ui/skeleton";
 const GROUP_PADDING = "pt-6 pb-2 pl-6 pr-3";
 
 export function RightSidebar() {
-  // Uses var() syntax — variable not registered in @theme
   return (
     <aside
       aria-label="Top questions and popular tags"
-      className="sticky top-[var(--top-bar-height)] hidden h-[calc(100svh-var(--top-bar-height))] self-start xl:block"
+      className="sticky top-(--top-bar-height) hidden h-[calc(100svh-var(--top-bar-height))] self-start xl:block"
     >
       <Sidebar
         id="right-sidebar"

From 5e925a6a15aeef65304caa9da8cdeddebc8be714 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Wed, 31 Dec 2025 01:19:26 +0400
Subject: [PATCH 8/9] refactor: coderabbit | remove redundant cn() wrappers
 from static classNames
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Navigation:

- Remove cn() from desktop-top-bar, mobile-top-bar, and left-sidebar headers
- Remove unused cn import from top bar components

The cn() utility adds no value when wrapping single static strings with no
conditionals or class merging. This cleanup reduces unnecessary function calls
while preserving identical className output.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components/navigation/desktop-top-bar.tsx | 7 +------
 components/navigation/left-sidebar.tsx    | 4 +---
 components/navigation/mobile-top-bar.tsx  | 7 +------
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/components/navigation/desktop-top-bar.tsx b/components/navigation/desktop-top-bar.tsx
index 1f0ac49..96c44fd 100644
--- a/components/navigation/desktop-top-bar.tsx
+++ b/components/navigation/desktop-top-bar.tsx
@@ -1,15 +1,10 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
 
 export function DesktopTopBar() {
   return (
-    <header
-      className={cn(
-        "sticky top-0 z-40 hidden h-(--top-bar-height) items-center gap-4 shadow-light bg-sidebar sm:flex layout-padding-x",
-      )}
-    >
+    <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>
       </div>
diff --git a/components/navigation/left-sidebar.tsx b/components/navigation/left-sidebar.tsx
index 487811c..c89428f 100644
--- a/components/navigation/left-sidebar.tsx
+++ b/components/navigation/left-sidebar.tsx
@@ -37,9 +37,7 @@ export function LeftSidebar() {
       width="13rem"
       className="shadow-light"
     >
-      <SidebarHeader
-        className={cn("h-(--top-bar-height) flex-row items-center px-3")}
-      >
+      <SidebarHeader className="h-(--top-bar-height) flex-row items-center px-3">
         <Link
           href="/"
           aria-label="DevFlow sidebar logo"
diff --git a/components/navigation/mobile-top-bar.tsx b/components/navigation/mobile-top-bar.tsx
index 6f8e17e..37cb033 100644
--- a/components/navigation/mobile-top-bar.tsx
+++ b/components/navigation/mobile-top-bar.tsx
@@ -1,15 +1,10 @@
 import Link from "next/link";
 import { MobileNav } from "@/components/navigation/mobile-nav";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
-import { cn } from "@/lib/utils";
 
 export function MobileTopBar() {
   return (
-    <header
-      className={cn(
-        "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-sidebar px-4 shadow-light 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 */}

From e285ebcaf3d28da1753b8e782b9b70dfffeff495 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Wed, 31 Dec 2025 01:44:53 +0400
Subject: [PATCH 9/9] style: increase mobile nav logo size from h-6 to h-7

Slightly larger logo in mobile navigation drawer for better visual balance.
---
 components/navigation/mobile-nav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/navigation/mobile-nav.tsx b/components/navigation/mobile-nav.tsx
index 52db38e..a527616 100644
--- a/components/navigation/mobile-nav.tsx
+++ b/components/navigation/mobile-nav.tsx
@@ -66,7 +66,7 @@ export function MobileNav() {
             <SheetTitle className="sr-only">Mobile navigation menu</SheetTitle>
             <SheetClose asChild>
               <Link href="/" className="flex items-center">
-                <ThemedFullLogo />
+                <ThemedFullLogo className="h-7" />
               </Link>
             </SheetClose>
           </SheetHeader>