Make header fit on mobile (icon-only nav, hide subtitle)

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

frontend/src/components/layout/Header.tsx

@@ -6,42 +6,42 @@ export function Header() {
 
   return (
     <header className="border-b border-gray-200 bg-white sticky top-0 z-50 shadow-sm">
-      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-6">
-        <Link to="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
-          <div className="w-9 h-9 bg-slate-900 rounded-lg flex items-center justify-center">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-3 sm:gap-6">
+        <Link to="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity min-w-0">
+          <div className="w-9 h-9 bg-slate-900 rounded-lg flex items-center justify-center shrink-0">
             <Database className="w-5 h-5 text-white" />
           </div>
-          <div>
-            <div className="text-xl font-semibold text-slate-900">MuSProt</div>
-            <div className="text-xs text-slate-500">Multistate Protein Structure Database</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>
         </Link>
 
-        <nav className="flex items-center gap-2">
+        <nav className="flex items-center gap-1 sm:gap-2 shrink-0">
           <Link
             to="/"
-            className={`flex items-center gap-1.5 px-3 py-2 text-sm rounded-lg transition-colors ${
+            className={`flex items-center gap-1.5 px-2.5 sm:px-3 py-2 text-sm rounded-lg transition-colors ${
               location.pathname === '/' ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50'
             }`}
           >
-            <Database className="w-4 h-4" />
-            Explorer
+            <Database className="w-4 h-4 shrink-0" />
+            <span className="hidden sm:inline">Explorer</span>
           </Link>
           <Link
             to="/docs"
-            className={`flex items-center gap-1.5 px-3 py-2 text-sm rounded-lg transition-colors ${
+            className={`flex items-center gap-1.5 px-2.5 sm:px-3 py-2 text-sm rounded-lg transition-colors ${
               location.pathname === '/docs' ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50'
             }`}
           >
-            <BookOpen className="w-4 h-4" />
-            Docs
+            <BookOpen className="w-4 h-4 shrink-0" />
+            <span className="hidden sm:inline">Docs</span>
           </Link>
           <a
             href="/api/protein/download/db"
-            className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors"
+            className="flex items-center gap-1.5 px-3 sm:px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors"
           >
-            <Download className="w-4 h-4" />
-            Download DB
+            <Download className="w-4 h-4 shrink-0" />
+            <span className="hidden sm:inline">Download DB</span>
           </a>
         </nav>
       </div>