From 67012be342da090743bc5cf32851d754c2065eec Mon Sep 17 00:00:00 2001
From: alexys1 <alex.258456yaranga@gmail.com>
Date: Fri, 31 Jul 2026 21:19:37 -0500
Subject: [PATCH] Fix nav bar wrapping on mobile landing page

At viewport widths below ~360px, the "Sign in" link wrapped onto two
lines and collided with the "Get started" button. Tightened nav
padding/gaps and added whitespace-nowrap on both links so the header
stays on one line down to 320px.

Fixes #3
---
 frontend/src/pages/LandingPage.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index baede37..4ffa411 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -142,25 +142,25 @@ export default function LandingPage() {
       {/* ── Nav ────────────────────────────────────────────── */}
       <nav className="sticky top-0 z-50 backdrop-blur-xl border-b border-white/[.04]"
         style={{ background: 'rgba(5,14,24,.75)' }}>
-        <div className="max-w-6xl mx-auto flex items-center justify-between px-6 h-16">
-          <Link to="/" className="flex items-center gap-2.5 group">
+        <div className="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 h-16">
+          <Link to="/" className="flex items-center gap-2.5 group shrink-0">
             <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center
                             shadow-lg shadow-brand-500/20 group-hover:shadow-brand-500/40 transition-shadow">
               <Gem size={14} className="text-white" />
             </div>
-            <span className="font-display text-lg font-semibold tracking-tight text-white">
+            <span className="font-display text-base sm:text-lg font-semibold tracking-tight text-white">
               Crystal<span className="text-blue-400">PDF</span>
             </span>
           </Link>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 sm:gap-2">
             <Link to="/login"
-              className="text-sm text-slate-400 hover:text-white px-4 py-2 transition-colors">
+              className="text-sm text-slate-400 hover:text-white px-2.5 sm:px-4 py-2 whitespace-nowrap transition-colors">
               Sign in
             </Link>
             <Link to="/register"
               className="text-sm font-medium text-blue-300 bg-brand-500/15 hover:bg-brand-500/25
                          border border-brand-500/25 hover:border-brand-500/40
-                         px-4 py-2 rounded-lg transition-all">
+                         px-3 sm:px-4 py-2 rounded-lg whitespace-nowrap transition-all">
               Get started
             </Link>
           </div>