peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

polish(feed): one-row toolbar — count after Source, sort right-aligned

Browse source 
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).
This commit is contained in:
npeter83 2026-06-30 04:56:08 +02:00
parent 5e588d15ff
commit f25d0768a1
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/Feed.tsx
View file

@ -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>
);