fix nav bar responsiveness

src/app.css

@@ -361,8 +361,18 @@ input:disabled, textarea:disabled, select:disabled {
   flex: 1;
 }
 
-.search-input, .search-type-select {
+.search-input {
-  flex: 1;
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border: 1px solid var(--input-border);
+  border-radius: 4px;
+  background: var(--input-bg);
+  color: var(--text-primary);
+  font-family: 'IBM Plex Serif', serif;
+}
+
+.search-type-select {
   padding: 0.75rem;
   font-size: 1rem;
   border: 1px solid var(--input-border);
@@ -647,8 +657,14 @@ pre code {
 /* Search form */
 .search-form {
   display: flex;
+  flex-direction: column;
   gap: 1rem;
   margin-bottom: 2rem;
+}
+
+.search-controls {
+  display: flex;
+  gap: 1rem;
   align-items: center;
 }
 

src/lib/components/NavBar.svelte

@@ -59,9 +59,6 @@
       <img src="/GR_logo.png" alt="GitRepublic Logo" class="main-logo" />
       <h1>gitrepublic</h1>
     </a>
-    <button class="mobile-menu-toggle" onclick={toggleMobileMenu} aria-label="Toggle menu">
-      <span class="hamburger-icon">☰</span>
-    </button>
     <nav class:mobile-open={mobileMenuOpen}>
       <div class="nav-links">
         <a href="/" class:active={isActive('/') && $page.url.pathname === '/'} onclick={closeMobileMenu}>Repositories</a>
@@ -80,6 +77,9 @@
           {isNIP07Available() ? 'Login' : 'NIP-07 Not Available'}
         </button>
       {/if}
+      <button class="mobile-menu-toggle" onclick={toggleMobileMenu} aria-label="Toggle menu">
+        <span class="hamburger-icon">☰</span>
+      </button>
     </div>
   </div>
 </header>
@@ -207,9 +207,17 @@
   /* Mobile responsive styles */
   @media (max-width: 768px) {
     .header-container {
+      display: flex;
       flex-wrap: wrap;
       padding: 1rem;
       gap: 1rem;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .header-logo {
+      flex-shrink: 0;
+      order: 1;
     }
 
     .header-logo h1 {
@@ -223,18 +231,18 @@
 
     .mobile-menu-toggle {
       display: block;
-      order: 2;
-      margin-left: auto;
     }
 
     nav {
       order: 3;
-      width: 100%;
+      flex: none !important;
+      width: 100% !important;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease;
       flex-direction: column;
       align-items: stretch;
+      margin-top: 0;
     }
 
     nav.mobile-open {
@@ -271,10 +279,13 @@
     }
 
     .auth-section {
-      order: 1;
+      order: 2;
-      width: auto;
+      display: flex !important;
-      flex-wrap: wrap;
+      align-items: center;
       gap: 0.5rem;
+      flex-shrink: 0;
+      margin-left: auto !important;
+      justify-content: flex-end;
     }
 
     .auth-section button {

src/lib/components/UserBadge.svelte

@@ -57,6 +57,12 @@
       return `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`;
     }
   }
+
+  function truncateHandle(handle: string | undefined): string {
+    if (!handle) return getShortNpub();
+    if (handle.length <= 20) return handle;
+    return handle.slice(0, 20) + '...';
+  }
 </script>
 
 <div class="user-badge">
@@ -65,7 +71,7 @@
   {:else}
     <img src="/favicon.png" alt="Profile" class="user-badge-avatar user-badge-avatar-fallback" />
   {/if}
-  <span class="user-badge-name">{userProfile?.name || getShortNpub()}</span>
+  <span class="user-badge-name">{truncateHandle(userProfile?.name)}</span>
 </div>
 
 <style>
@@ -104,4 +110,15 @@
     font-weight: 500;
     white-space: nowrap;
   }
+
+  /* Hide name on narrow screens, show only picture */
+  @media (max-width: 768px) {
+    .user-badge-name {
+      display: none;
+    }
+
+    .user-badge {
+      padding: 0.25rem;
+    }
+  }
 </style>

src/routes/search/+page.svelte

@@ -55,14 +55,16 @@
         placeholder="Search repositories or code..."
         class="search-input"
       />
-      <select bind:value={searchType} class="search-type-select">
+      <div class="search-controls">
-        <option value="repos">Repositories</option>
+        <select bind:value={searchType} class="search-type-select">
-        <option value="code">Code</option>
+          <option value="repos">Repositories</option>
-        <option value="all">All</option>
+          <option value="code">Code</option>
-      </select>
+          <option value="all">All</option>
-      <button type="submit" disabled={loading || !query.trim()} class="search-button">
+        </select>
-        {loading ? 'Searching...' : 'Search'}
+        <button type="submit" disabled={loading || !query.trim()} class="search-button">
-      </button>
+          {loading ? 'Searching...' : 'Search'}
+        </button>
+      </div>
     </form>
 
     {#if error}