From f00a2800b2ae5bcf473d6c94e5be2d2de748d196 Mon Sep 17 00:00:00 2001
From: hwantage <82494320+hwantage@users.noreply.github.com>
Date: Sat, 24 Oct 2026 11:20:21 +0900
Subject: [PATCH] fix(ui): align multiline filter toggle row text and icons to
 top-left (#16054)

* 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>
---
 src/renderer/src/components/sidebar/FilterToggleRow.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/sidebar/FilterToggleRow.tsx b/src/renderer/src/components/sidebar/FilterToggleRow.tsx
index fc1b4a7dec0..65f0e9303f5 100644
--- a/src/renderer/src/components/sidebar/FilterToggleRow.tsx
+++ b/src/renderer/src/components/sidebar/FilterToggleRow.tsx
@@ -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}