web: pin the utility cluster to the top-right of the controls bar

Wrap the essential controls in a single .controls-main block that wraps
internally, so reader/settings + downloads stay at the TOP-right instead of
dropping to a second row. #controls (index only) becomes top-aligned; the
reader's .controls form is untouched.

1 files changed, 13 insertions, 1 deletions

diff --git a/internal/web/static/base.css b/internal/web/static/base.css
index 2faabc5..3a240b2 100644
--- a/internal/web/static/base.css
+++ b/internal/web/static/base.css
@@ -293,8 +293,20 @@ a {
 .bookmark .tags { font-size: 0.85rem; }
 .tag-filter { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); font-family: var(--font-ui); }
 
+/* Index top bar: the essential controls sit in one wrapping block on the left;
+ * the utility cluster is pinned to the TOP-right, so it stays up top even when
+ * the controls wrap onto a second line. (#controls is the index form only; the
+ * reader's .controls form keeps the plain single-row wrap.) */
+#controls { align-items: flex-start; }
+.controls-main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
 /* Utility cluster (nav links + downloads), pushed to the right of the controls
- * bar; wraps beneath when the row is narrow. */
+ * bar; wraps beneath when the window is too narrow to fit it up top. */
 .controls-side {
   margin-left: auto;
   display: inline-flex;