filter and sort moved

frontend/static/style.css

@@ -185,7 +185,34 @@ body::selection {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 24px;
+  gap: 18px;
+}
+
+.header-tools {
+  display: grid;
+  flex: 1 1 auto;
+  justify-items: end;
+  gap: 8px;
+}
+
+.header-tools .toolbar {
+  width: min(100%, 560px);
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.header-tools .toolbar label {
+  min-width: 0;
+  flex: 1 1 110px;
+  font-size: 0.68rem;
+}
+
+.header-tools .toolbar select {
+  min-width: 0;
+  padding: 6px 8px;
 }
 
 .header-actions {
@@ -325,6 +352,11 @@ main.container {
   border-radius: 12px;
 }
 
+.site-header .toolbar {
+  margin-top: 18px;
+  margin-bottom: 0;
+}
+
 .toolbar label,
 .settings-panel label {
   display: grid;
@@ -735,9 +767,20 @@ button:disabled {
 
   .header-row {
     align-items: center;
+    flex-wrap: wrap;
     gap: 12px;
   }
 
+  .header-tools {
+    order: 3;
+    flex-basis: 100%;
+    justify-items: stretch;
+  }
+
+  .header-tools .header-actions {
+    justify-content: flex-end;
+  }
+
   .header-actions {
     align-items: flex-end;
   }