feat: header layout

public/index.html

@@ -15,6 +15,12 @@
                 </h1>
             </div>
             <div class="header-right">
+                <div class="archive-toggle-wrapper" title="Toggle archived links">
+                    <button id="archiveToggle" class="archive-toggle">
+                        <span class="toggle-slider"></span>
+                    </button>
+                    <span class="toggle-label">Archive</span>
+                </div>
                 <div class="search-wrapper">
                     <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <circle cx="11" cy="11" r="8"></circle>
@@ -27,12 +33,6 @@
                         autocomplete="off"
                     >
                 </div>
-                <div class="archive-toggle-wrapper" title="Toggle archived links">
-                    <button id="archiveToggle" class="archive-toggle">
-                        <span class="toggle-slider"></span>
-                    </button>
-                    <span class="toggle-label">Archive</span>
-                </div>
             </div>
         </div>
     </header>

public/styles.css

@@ -573,13 +573,17 @@ body {
     }
 
     .header-container {
-        flex-direction: column;
+        display: grid;
-        gap: 1rem;
+        grid-template-columns: 1fr auto;
-        align-items: stretch;
+        grid-template-rows: auto auto;
+        gap: 0.75rem;
+        align-items: center;
     }
 
     .header-left {
-        justify-content: center;
+        grid-column: 1;
+        grid-row: 1;
+        justify-content: flex-start;
     }
 
     .app-title {
@@ -591,21 +595,21 @@ body {
     }
 
     .header-right {
-        max-width: 100%;
+        display: contents;
-        flex-direction: row;
-        gap: 0.75rem;
-        flex-wrap: wrap;
-    }
-
-    .search-wrapper {
-        flex: 1;
-        min-width: 200px;
     }
 
     .archive-toggle-wrapper {
+        grid-column: 2;
+        grid-row: 1;
         flex-shrink: 0;
     }
 
+    .search-wrapper {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        width: 100%;
+    }
+
     .link-actions {
         flex-wrap: wrap;
         gap: 0.5rem;