starred/orca
1
0
Fork 0
mirror of https://github.com/stablyai/orca.git synced 2026-10-30 16:47:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): align multiline filter toggle row text and icons to top-left (#16054)

Browse Source 
* fix(ui): align multiline filter toggle row text and icons to top-left

- Add `text-left` and `items-start` to FilterToggleRow button and label wrapper.

- Add `mt-0.5` top margin to icon and switch indicator for optical alignment with multiline text.

- Resolves center-aligned wrapped text and vertically misaligned toggles under long localized labels (Korean, Japanese, Spanish, etc.).

* fix(ui): align multiline filter toggle labels with their controls

---------

Co-authored-by: Neil <neil@stably.ai>
This commit is contained in:
hwantage
2026-10-23 19:20:21 -07:00
committed by GitHub
co-authored by Neil
parent 95e18f519a
commit f00a2800b2
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/sidebar/FilterToggleRow.tsx
+4 -4
View File
@@ -37,20 +37,20 @@ export function FilterToggleRow({
className={cn(
// Why pl-* and not px-2 + pl-6: Tailwind v4 emits px as padding-inline,
// which outranks a physical pl-6 override and flattens the indent.
'flex w-full items-center justify-between gap-2 rounded-[5px] py-1.5 pr-2 text-[12px] font-medium hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
'flex w-full items-start justify-between gap-2 rounded-[5px] py-1.5 pr-2 text-left text-[12px] font-medium hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
indented ? 'pl-7' : 'pl-2'
)}
>
<span
className={cn(
'inline-flex items-center gap-2',
'inline-flex items-start gap-2',
indented ? 'text-muted-foreground' : 'text-foreground'
)}
>
<span className="text-muted-foreground">{icon}</span>
<span className="text-muted-foreground mt-0.5">{icon}</span>
{label}
</span>
<span className="inline-flex items-center gap-2">
<span className="inline-flex items-center gap-2 mt-0.5">
{shortcutLabel ? <DropdownMenuShortcut>{shortcutLabel}</DropdownMenuShortcut> : null}
<SwitchIndicator
checked={checked}