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 = ( const toolbar = (
<div className="pb-3"> <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) => ( {SHOW_IDS.map((id) => (
<button <button
key={id} key={id}
@ -498,9 +498,8 @@ export default function Feed({
</label> </label>
</> </>
)} )}
</div> <span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
<div className="flex items-center gap-2 border-t border-border pt-2.5"> <span className="text-xs text-muted whitespace-nowrap">
<span className="text-sm text-muted">
{countQuery.data {countQuery.data
? t("feed.videoCount", { ? t("feed.videoCount", {
count: countQuery.data.count, count: countQuery.data.count,
@ -508,8 +507,8 @@ export default function Feed({
}) })
: " "} : " "}
</span> </span>
<div className="flex-1" /> <div className="ml-auto flex items-center gap-2">
<span className="text-xs text-muted">{t("feed.sortLabel")}</span> <span className="text-xs text-muted">{t("feed.sortLabel")}</span>
<select <select
value={sortKey} value={sortKey}
onChange={(e) => { onChange={(e) => {
@ -554,6 +553,7 @@ export default function Feed({
<RefreshCw className="w-4 h-4" /> <RefreshCw className="w-4 h-4" />
</button> </button>
)} )}
</div>
</div> </div>
</div> </div>
); );