Implement inline horizontal scroll navigation for mobile viewports

[google-labs-jules]

Why

On screens narrower than 640px, the global navigation links were previously hidden, trapping mobile visitors on their entry pages unless they manually edited subpage URLs. This layout gap created friction, limited content discovery, and negatively impacted mobile bounce rates.

To resolve this without introducing the overhead of complex state engines, mobile hamburger menus, or JavaScript resize listeners, we have introduced a persistent, swipeable horizontal menu directly beneath the logo for mobile viewports.

Key Decisions & Rationale

• Stateless, CSS-Driven Layout: Kept navigation purely CSS-driven using Tailwind CSS responsive utilities. This guarantees zero layout-shift lag and keeps the DOM stateless, aligning with mobile performance best practices.
• DRY Svelte 5 Snippets: Refactored Navigation.svelte to leverage Svelte 5's #snippet syntax. This allows us to declare the navigation links once and reuse them in both desktop and mobile views, preventing link maintenance drift and ensuring that active link styling remains perfectly consistent.
• Aesthetics & Scrollbar Suppression: Applied scoped CSS styling in Svelte to suppress native browser scrollbars while keeping native touch swipe mechanisms fully functional. Negative margins (-mx-6 px-6) are used to let the scrollable area bleed beautifully to the edge of the screen.
• Layout Height Adjustment: To prevent the newly stacked mobile navigation header from overlapping main page content, we transitioned the layout wrapper margin from a hardcoded style="margin-top: 80px;" inline style to dynamic Tailwind margin classes (mt-[110px] sm:mt-[80px]).

---

Detailed Changes

1. Navigation Refactoring (Navigation.svelte)

• Defined #snippet links() containing all navigation links (Home, Papers, Projects, Writing, CV) with their active styling triggers.
• Added a mobile-only (sm:hidden) horizontal scroll row below the brand logo.
• Constrained the mobile navigation row height to under 48px to preserve critical vertical screen real estate.
• Suppressed native horizontal scrollbars cross-browser using scoped CSS:

  .scroll-container {
      scrollbar-width: none;
      -ms-overflow-style: none;
  }
  .scroll-container::-webkit-scrollbar {
      display: none;
  }

2. Layout Integration (+layout.svelte)

• Replaced the hardcoded inline subpage margin offset with dynamic Tailwind spacing: mt-[110px] sm:mt-[80px].
• This ensures pages flow correctly under the header on mobile devices while keeping the desktop layout unchanged.

[google-labs-jules]

[CI/CD Fix Attempt 1] Fixed the CI test_and_build job failure by running Prettier to format src/lib/components/navigation/Navigation.svelte. This resolved the code style formatting issue that was causing the lint step to fail.