Toggle header nav by orientation (hamburger only in portrait)

Tailwind here is pre-compiled without orientation variants, so drive the
landscape/portrait switch with plain media-query CSS classes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/layout/Header.tsx

@@ -25,12 +25,12 @@ export function Header() {
           </div>
           <div className="min-w-0">
             <div className="text-xl font-semibold text-slate-900 truncate">MuSProt</div>
-            <div className="hidden sm:block text-xs text-slate-500 truncate">Multistate Protein Structure Database</div>
+            <div className="header-nav-subtitle text-xs text-slate-500 truncate">Multistate Protein Structure Database</div>
           </div>
         </Link>
 
-        {/* Desktop nav */}
-        <nav className="hidden sm:flex items-center gap-2">
+        {/* Full nav — shown in landscape (W >= H) */}
+        <nav className="header-nav-full items-center gap-2">
           <Link to="/" className={navItemClass(location.pathname === '/')}>
             <Database className="w-4 h-4 shrink-0" />
             Explorer
@@ -48,21 +48,21 @@ export function Header() {
           </a>
         </nav>
 
-        {/* Mobile menu toggle */}
+        {/* Menu toggle — shown only in portrait (W < H) */}
         <button
           type="button"
           aria-label="Toggle navigation menu"
           aria-expanded={menuOpen}
           onClick={() => setMenuOpen((open) => !open)}
-          className="sm:hidden inline-flex items-center justify-center p-2 rounded-lg text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
+          className="header-nav-toggle items-center justify-center p-2 rounded-lg text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
         >
           {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
         </button>
       </div>
 
-      {/* Mobile dropdown menu */}
+      {/* Dropdown menu — portrait only */}
       {menuOpen && (
-        <nav className="sm:hidden border-t border-gray-200 bg-white px-4 py-3 flex flex-col gap-1">
+        <nav className="header-nav-dropdown border-t border-gray-200 bg-white px-4 py-3 flex-col gap-1">
           <Link to="/" className={navItemClass(location.pathname === '/')}>
             <Database className="w-4 h-4 shrink-0" />
             Explorer

frontend/src/index.css

@@ -3028,3 +3028,38 @@ body {
 #root {
   overflow-x: clip;
 }
+
+/* Header navigation by window orientation.
+   Tailwind here is pre-compiled with no orientation variants, so toggle via
+   plain media queries. Default (landscape, W >= H): full nav + subtitle, no
+   hamburger. Portrait (W < H): hamburger + dropdown, hide the inline nav. */
+.header-nav-full {
+  display: flex;
+}
+.header-nav-subtitle {
+  display: block;
+}
+.header-nav-toggle {
+  display: none;
+}
+.header-nav-dropdown {
+  display: flex;
+}
+
+@media (orientation: portrait) {
+  .header-nav-full {
+    display: none;
+  }
+  .header-nav-subtitle {
+    display: none;
+  }
+  .header-nav-toggle {
+    display: inline-flex;
+  }
+}
+
+@media (orientation: landscape) {
+  .header-nav-dropdown {
+    display: none;
+  }
+}