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;
   }

frontend/templates/feed.html

@@ -16,9 +16,10 @@
             <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
             <p>Public link feed</p>
           </div>
-          <div class="header-actions">
-            <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="auth-menu">Menu</button>
-            <nav id="auth-menu" class="auth-menu hidden" aria-label="Account menu">
+          <div class="header-tools">
+            <div class="header-actions">
+              <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="auth-menu">Menu</button>
+              <nav id="auth-menu" class="auth-menu hidden" aria-label="Account menu">
               <a id="auth-home-link" href="/">Home</a>
               <a id="auth-about-link" href="/about">About</a>
               <a id="auth-login-button" href="/login">Sign in</a>
@@ -29,7 +30,29 @@
                 <a id="auth-username" class="user-name" href="/"></a>
               </div>
               <button id="logout-button" class="logout-button hidden" type="button">Sign out</button>
-            </nav>
+              </nav>
+            </div>
+            <section class="toolbar">
+              <label>
+                Sort
+                <select id="sort-select">
+                  <option value="newest">Newest first</option>
+                  <option value="oldest">Oldest first</option>
+                </select>
+              </label>
+              <label>
+                User filter
+                <select id="user-filter">
+                  <option value="">All users</option>
+                </select>
+              </label>
+              <label>
+                Tag filter
+                <select id="tag-filter">
+                  <option value="">All tags</option>
+                </select>
+              </label>
+            </section>
           </div>
         </div>
       </div>
@@ -51,28 +74,6 @@
         <p>{{ profile.bio or 'No profile information provided.' }}</p>
       </section>
       {% endif %}
-      <section class="toolbar">
-        <label>
-          Sort
-          <select id="sort-select">
-            <option value="newest">Newest first</option>
-            <option value="oldest">Oldest first</option>
-          </select>
-        </label>
-        <label>
-          User filter
-          <select id="user-filter">
-            <option value="">All users</option>
-          </select>
-        </label>
-        <label>
-          Tag filter
-          <select id="tag-filter">
-            <option value="">All tags</option>
-          </select>
-        </label>
-      </section>
-
       <section id="feed" class="feed" aria-live="polite"></section>
     </main>
     <footer class="site-footer">Copyright © 2026 Olaf Kolkman  · <a href="https://git.kolkman.org/olaf/Link-Log">git.kolkman.org/LinkLog</a></footer>