From bbaf2c89a0cc251b14e1ee7329c3d6f3095f3ebc Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Sun, 1 Nov 2026 09:29:42 +0800
Subject: [PATCH] fix(search): keep Find and Replace in Files footer actions
 inside the dialog (#628)

The Replace in Files footer has more actions than fit beside its keyboard hint, so buttons shrank below their labels, overlapped, and ran past the dialog edge. Buttons and the Preview checkbox now keep their size, the hint truncates first, and the actions wrap to a second row aligned right. The results and preview areas shrink when the footer wraps or the window is short. Find in Files shares the footer.
---
 .../search/find/FindInFiles.module.css        | 30 +++++++++++++++----
 src/features/search/find/FindInFiles.tsx      |  1 -
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/features/search/find/FindInFiles.module.css b/src/features/search/find/FindInFiles.module.css
index 9737ec6b4..76c4ed1de 100644
--- a/src/features/search/find/FindInFiles.module.css
+++ b/src/features/search/find/FindInFiles.module.css
@@ -1,7 +1,13 @@
 .dialog {
-  max-height: 86vh;
+  max-height: min(86vh, calc(90vh - 24px));
+}
+.dialog > :global([data-dialog-body]) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 .root {
+  flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -102,7 +108,8 @@
   border-color: var(--accent);
 }
 .results {
-  flex: none;
+  flex: 0 1 242px;
+  min-height: 0;
   height: 242px;
   display: flex;
   flex-direction: column;
@@ -153,7 +160,8 @@
   white-space: nowrap;
 }
 .previewBox {
-  flex: none;
+  flex: 0 1 220px;
+  min-height: 0;
   height: 220px;
   display: flex;
   flex-direction: column;
@@ -161,13 +169,25 @@
 .footer {
   flex: none;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: 8px;
-  height: 38px;
-  padding: 0 12px;
+  min-height: 38px;
+  padding: 6px 12px;
   border-top: 1px solid var(--border-popup);
 }
+.footer > button,
+.footer > label {
+  flex: none;
+  white-space: nowrap;
+}
 .hint {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--fg-faint);
   font-size: var(--fs-small);
 }
diff --git a/src/features/search/find/FindInFiles.tsx b/src/features/search/find/FindInFiles.tsx
index c7cd8b731..957b8bba1 100644
--- a/src/features/search/find/FindInFiles.tsx
+++ b/src/features/search/find/FindInFiles.tsx
@@ -747,7 +747,6 @@ function FindInFilesDialog() {
               <T>↵ Open · ⇧↵ Open to the side · ⌘↵ Open in Find Window</T>
             )}
           </span>
-          <span className={styles.spacer} />
           {s.replace && progress && (
             <span className={styles.hint} aria-live="polite">
               {tx`Replacing… ${progress.done}/${progress.total} files`}