From f25d0768a119847468b8dc055ee67f3b4db3a1bc Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 30 Jun 2026 04:56:08 +0200
Subject: [PATCH] =?UTF-8?q?polish(feed):=20one-row=20toolbar=20=E2=80=94?=
 =?UTF-8?q?=20count=20after=20Source,=20sort=20right-aligned?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Collapse the feed toolbar's two rows into one: the video count sits right after the Source
dropdown, and the sort controls move onto the same row, pushed right with ml-auto (wraps
gracefully on narrow widths). Applies everywhere the Feed renders (main feed + channel page).
---
 frontend/src/components/Feed.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index 345a485..6c66450 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -442,7 +442,7 @@ export default function Feed({
 
   const toolbar = (
     <div className="pb-3">
-      <div className="flex items-center gap-1.5 flex-wrap mb-2.5">
+      <div className="flex items-center gap-1.5 gap-y-2 flex-wrap">
         {SHOW_IDS.map((id) => (
           <button
             key={id}
@@ -498,9 +498,8 @@ export default function Feed({
             </label>
           </>
         )}
-      </div>
-      <div className="flex items-center gap-2 border-t border-border pt-2.5">
-        <span className="text-sm text-muted">
+        <span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
+        <span className="text-xs text-muted whitespace-nowrap">
           {countQuery.data
             ? t("feed.videoCount", {
                 count: countQuery.data.count,
@@ -508,8 +507,8 @@ export default function Feed({
               })
             : " "}
         </span>
-        <div className="flex-1" />
-        <span className="text-xs text-muted">{t("feed.sortLabel")}</span>
+        <div className="ml-auto flex items-center gap-2">
+          <span className="text-xs text-muted">{t("feed.sortLabel")}</span>
         <select
           value={sortKey}
           onChange={(e) => {
@@ -554,6 +553,7 @@ export default function Feed({
             <RefreshCw className="w-4 h-4" />
           </button>
         )}
+        </div>
       </div>
     </div>
   );