Merge ui-archive-search into dev (archive search controls: centered flex row + narrow reflow)

DeepDrftPublic.Client/Pages/ArchiveView.razor

@@ -10,7 +10,8 @@
            The release grid still prerenders so the archive is meaningful before hydration. *@
         @if (RendererInfo.IsInteractive)
         {
-            <div class="archive-search-row">
+            <div class="archive-controls-row">
+                <div class="archive-controls-search">
                     <MudTextField T="string"
                                   Value="@SearchText"
                                   ValueChanged="@OnSearchInput"
@@ -25,7 +26,7 @@
                                   Class="archive-search-field"/>
                 </div>
 
-            <div class="archive-filter-row">
+                <div class="archive-controls-medium">
                     <MudToggleGroup T="ReleaseMedium?"
                                     Value="@_selectedMedium"
                                     ValueChanged="@OnMediumSelected"
@@ -43,7 +44,7 @@
 
                 @if (_genres.Count > 0)
                 {
-                <div class="archive-filter-row">
+                    <div class="archive-controls-genre">
                         <MudChipSet T="string"
                                     SelectedValue="@_selectedGenre"
                                     SelectedValueChanged="@OnGenreSelected"
@@ -56,6 +57,7 @@
                         </MudChipSet>
                     </div>
                 }
+            </div>
         }
 
         @if (_loading)

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 0;
+    min-width: 180px;
 }
 
 /* archive-search-field rides on MudTextField, whose root is a child Razor component element.
@@ -15,11 +24,31 @@
     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: 1 1 0;
+    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-genre {
+        order: 0;
+        flex: 0 1 auto;
+    }
 }
 
 .archive-card-center {