From 3a27fb59cd8670d5d22f9d1f0b96203ba2d59aba Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Fri, 17 Jul 2026 18:37:55 -0700
Subject: [PATCH] fix(settings): stop shortcut filter rail overlapping the list
 below xl (#9252)

Co-authored-by: Orca <help@stably.ai>
---
 src/renderer/src/components/settings/ShortcutsPane.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/components/settings/ShortcutsPane.tsx b/src/renderer/src/components/settings/ShortcutsPane.tsx
index 29f9661d196..a35294e1b3f 100644
--- a/src/renderer/src/components/settings/ShortcutsPane.tsx
+++ b/src/renderer/src/components/settings/ShortcutsPane.tsx
@@ -343,7 +343,10 @@ export function ShortcutsPane(): React.JSX.Element {
           </div>
         ) : null}
 
-        <div className="grid min-h-0 flex-1 gap-6 xl:grid-cols-[16rem_minmax(0,1fr)]">
+        {/* Below xl the rail stacks above the list in one column; pin the rail
+            row to its content (auto) and let the list row take the rest, so the
+            rail can't spill over the list the way two equal auto rows would. */}
+        <div className="grid min-h-0 flex-1 gap-6 max-xl:grid-rows-[auto_minmax(0,1fr)] xl:grid-cols-[16rem_minmax(0,1fr)]">
           <ShortcutFilterRail
             query={shortcutQuery}
             onQueryChange={setShortcutQuery}