feat: header layout

public/styles.css

@@ -573,13 +573,17 @@ body {
     }
 
     .header-container {
-        flex-direction: column;
-        gap: 1rem;
-        align-items: stretch;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        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%;
-        flex-direction: row;
-        gap: 0.75rem;
-        flex-wrap: wrap;
-    }
-
-    .search-wrapper {
-        flex: 1;
-        min-width: 200px;
+        display: contents;
     }
 
     .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;