fix(nav): prevent mobile top bar overflow on narrow phones

The mobile nav was overflowing on narrow viewports: "Tools ▼" wrapped
(arrow dropped to a second line) and the language switcher clipped
off the right edge of the screen. Root cause: no nowrap on inline
items, desktop-sized margins/padding applied to phone widths, and
too many items competing for space on <420px screens.

- Add `white-space: nowrap` and `flex-shrink: 0` to .logo, .navLink,
  .dropdownWrapper, .dropdownButton so labels can't wrap or be
  crushed by siblings.
- New ≤520px breakpoint: tighter container padding, tighter link
  padding, and smaller inter-item margins.
- New ≤420px breakpoint: hide the Contact link entirely (still
  reachable from the footer) so the language switcher has room.
- Apply a new .contactLink modifier class in Nav.tsx so the media
  query has a scoped target.

Verified at 320/375/414/480/768px — zero children overflow the
viewport, Tools button stays on one line, EN switcher fully visible.

Author: kevinkiklee

src/components/layout/Nav.module.css

@@ -27,6 +27,8 @@
   color: var(--text-primary);
   text-decoration: none;
   letter-spacing: 0.02em;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .logoIcon {
@@ -50,6 +52,8 @@
   padding: var(--space-xs) var(--space-sm);
   border-radius: var(--radius-sm);
   transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .navLink:hover {
@@ -68,6 +72,7 @@
   align-self: stretch;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .dropdownButton {
@@ -79,6 +84,7 @@
   padding: var(--space-xs) var(--space-sm);
   border-radius: var(--radius-sm);
   transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
+  white-space: nowrap;
 }
 
 .dropdownButton:hover {
@@ -251,6 +257,32 @@
   }
 }
 
+/* Phone: tighten spacing so Tools / Glossary / Contact / Language
+   all fit inside the viewport. Contact is still reachable from the
+   footer, so hiding it on very narrow screens is the least-lossy
+   way to keep the language switcher from clipping off-screen. */
+@media (max-width: 520px) {
+  .navInner {
+    padding: 0 var(--space-sm);
+  }
+  .navLink,
+  .dropdownWrapper {
+    margin-left: var(--space-sm);
+  }
+  .navLink {
+    padding: var(--space-xs) 6px;
+  }
+  .dropdownButton {
+    padding: var(--space-xs) 6px;
+  }
+}
+
+@media (max-width: 420px) {
+  .contactLink {
+    display: none;
+  }
+}
+
 @media (max-width: 767px) {
   .megaMenu {
     position: fixed;

src/components/layout/Nav.tsx

@@ -184,7 +184,7 @@ export function Nav({ theme, onThemeChange }: NavProps) {
           onClick={() => trackNavClick({ target: 'glossary', source: 'mega-menu' })}
         >{t('glossary')}</Link>
         <div className={styles.spacer} />
-        <Link href="/contact" prefetch={false} className={styles.navLink}>{t('contact')}</Link>
+        <Link href="/contact" prefetch={false} className={`${styles.navLink} ${styles.contactLink}`}>{t('contact')}</Link>
         <span className={styles.desktopThemeToggle}><ThemeToggle theme={theme} onChange={onThemeChange} /></span>
         <LanguageSwitcher />
       </div>