Fix library filter bar button misalignment

.field's margin-bottom (meant for vertically-stacked fields) pushed each
field's box lower than the bare Filter button under align-items: flex-end,
making the button look higher than the search/playlist/format boxes next
to it. New .filter-bar class zeroes that margin instead of the previous
ad-hoc inline flex styling.

app/static/style.css

@@ -366,6 +366,20 @@ form.inline { display: inline-block; }
 }
 .field .hint { font-size: 0.78rem; color: var(--muted-2); margin-top: -0.15rem; }
 
+/* A row of .field's next to a bare button, aligned to the bottom (e.g. the
+   library page's search/filter bar). .field's margin-bottom is meant for
+   fields stacked vertically -- with align-items: flex-end it pushes the
+   field's box lower than the button next to it (which has no such margin),
+   making the button look higher/misaligned. Zero it out in this context. */
+.filter-bar {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  max-width: none;
+}
+.filter-bar .field { margin-bottom: 0; }
+
 input[type="text"], input[type="password"], input[type="file"], input[type="search"], textarea, select {
   font: inherit;
   color: var(--fg);

app/templates/library/index.html

@@ -12,7 +12,7 @@
 <div class="notice success">Track deleted.</div>
 {% endif %}
 
-<form method="get" action="/library" class="panel" style="display:flex; gap:0.75rem; flex-wrap:wrap; align-items:flex-end; max-width:none;">
+<form method="get" action="/library" class="panel filter-bar">
   <div class="field">
     <label for="q">Search</label>
     <input type="text" id="q" name="q" value="{{ q }}" placeholder="artist, title, album...">