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

fix(ui): SortControl direction toggle no longer wraps on narrow popovers

Browse Source 
The asc/desc buttons in the sort popover footer share one component across
Feed and Plex browse, but rendered differently: the Plex popover is narrower
(short option labels), so "Descending" wrapped icon-over-text and made the
active button taller. Add whitespace-nowrap to the direction buttons and bump
the popover min-width (min-w-52 -> min-w-56) so both call-sites render an
identical single-line toggle.
This commit is contained in:
peter
2026-08-28 02:06:06 +02:00
parent 257dc5741d
commit 11e32163b8
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SortControl.tsx
+2 -2
View File
@@ -55,7 +55,7 @@ export default function SortControl({
const summary = activeOpt?.label ?? defaultLabel ?? options[0]?.label ?? ""; const summary = activeOpt?.label ?? defaultLabel ?? options[0]?.label ?? "";
const segCls = (on: boolean) => const segCls = (on: boolean) =>
`flex flex-1 items-center justify-center gap-1 rounded-md border px-2 py-1 text-2xs transition ${ `flex flex-1 items-center justify-center gap-1 whitespace-nowrap rounded-md border px-2 py-1 text-2xs transition ${
on on
? "border-accent bg-accent/15 text-accent" ? "border-accent bg-accent/15 text-accent"
: "border-border text-muted hover:border-accent/50 hover:text-fg" : "border-border text-muted hover:border-accent/50 hover:text-fg"
@@ -92,7 +92,7 @@ export default function SortControl({
<PopoverSurface <PopoverSurface
popover={pop} popover={pop}
ariaLabel={label} ariaLabel={label}
className="glass-menu min-w-52 rounded-xl p-1.5 shadow-lg animate-[popIn_0.16s_ease]" className="glass-menu min-w-56 rounded-xl p-1.5 shadow-lg animate-[popIn_0.16s_ease]"
> >
{/* One exclusive choice of sort key (radios), scoped by a group so AT announces which is {/* One exclusive choice of sort key (radios), scoped by a group so AT announces which is
checked — the surface is a menu (see the mode above), never a listbox with orphaned options. */} checked — the surface is a menu (see the mode above), never a listbox with orphaned options. */}