refactor(archive): single flex row for search/medium/genre controls with narrow-screen reflow

DeepDrftPublic.Client/Pages/ArchiveView.razor.css

@@ -2,10 +2,19 @@
     padding-top: 16px;
 }
 
-.archive-search-row {
+/* Single flex row: search left | toggle center | chips right.
+   On narrow screens the medium toggle reflows to its own centered row below. */
+.archive-controls-row {
     display: flex;
-    justify-content: flex-start;
-    padding: 0 0 12px 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 24px;
+    padding: 0 0 20px 0;
+}
+
+.archive-controls-search {
+    flex: 1 1 auto;
+    min-width: 180px;
 }
 
 /* archive-search-field rides on MudTextField, whose root is a child Razor component element.
@@ -15,11 +24,35 @@
     width: 100%;
 }
 
-.archive-filter-row {
+.archive-controls-medium {
+    flex: 0 0 auto;
     display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    padding: 0 0 12px 0;
+    justify-content: center;
+}
+
+.archive-controls-genre {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: flex-end;
+}
+
+/* Narrow screens: push the medium toggle to a full-width centered second row.
+   Search and genre chips stay together on the first row. */
+@media (max-width: 600px) {
+    .archive-controls-medium {
+        order: 1;
+        flex: 1 0 100%;
+        justify-content: center;
+    }
+
+    .archive-controls-search {
+        order: 0;
+    }
+
+    .archive-controls-genre {
+        order: 0;
+        flex: 0 1 auto;
+    }
 }
 
 .archive-card-center {