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.

2 files changed, 17 insertions, 3 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;
diff --git a/internal/web/templates/index.html b/internal/web/templates/index.html
index c706323..50ffdac 100644
--- a/internal/web/templates/index.html
+++ b/internal/web/templates/index.html
@@ -31,6 +31,7 @@ function stepDate(n){
 <div class="page">
 
   <form id="controls" class="controls" hx-get="/readings" hx-target="#pane" hx-trigger="change">
+    <div class="controls-main">
     {{/* Always-present marker so the server can tell a form submit with every
          version unchecked (show nothing) from a fresh visit (config default). */}}
     <input type="hidden" name="vset" value="1">
@@ -70,9 +71,10 @@ function stepDate(n){
          it flips the body class without refetching the readings. */}}
     <label class="mono-toggle"><input type="checkbox" {{if .Mono}}checked{{end}}
            onchange="event.stopPropagation();document.body.classList.toggle('mono', this.checked)"> {{.L.Mono}}</label>
+    </div>
 
-    {{/* Utility links, pushed to the right (see .controls-side). The export URLs
-         are built from the live control values at click time. */}}
+    {{/* Utility links, pinned to the top-right (see #controls / .controls-side).
+         The export URLs are built from the live control values at click time. */}}
     <span class="controls-side">
       <a class="nav-link" href="/reader">{{.L.NavReader}} &rarr;</a>
       <a class="nav-link" href="/settings">{{.L.NavSettings}}</a>