From baa226d536d593661443314943824921bcd1a617 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Tue, 22 Sep 2026 11:28:45 +0200
Subject: [PATCH] fix(file-history-dialog): prevent long paths from displacing
 header controls

Constrain the dialog header/body layout so very long file paths don't push
or wrap the dialog controls. Results: the title is truncated with an
ellipsis but the full name is available on hover.

- CSS: add grid-template-columns and min-width:0 to dialog/body; force
  unified-dialog-header to avoid wrapping and set unified-dialog-text
  flex-basis:0; truncate h2 with overflow/ellipsis.
- Svelte: add a title attribute to the h2 so the full filename is shown
  on hover.
---
 src/app.css                                 | 9 ++++++++-
 src/lib/components/FileHistoryDialog.svelte | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 88f844f..3bace5e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3647,6 +3647,7 @@
   .compare-dialog-backdrop { z-index: 80; }
   .file-history-dialog {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     grid-template-rows: auto minmax(0, 1fr);
     width: min(780px, calc(100vw - 32px));
     height: min(720px, calc(100vh - 32px));
@@ -3695,7 +3696,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .file-history-dialog-body { min-height: 0; overflow: hidden; background: var(--color-surface-solid); }
+  .file-history-dialog-body { min-width: 0; min-height: 0; overflow: hidden; background: var(--color-surface-solid); }
   .file-history-dialog-list { height: 100%; padding: 6px; overflow: auto; }
   .file-history-dialog-row {
     display: grid;
@@ -9173,6 +9174,12 @@ section > header.page-header.page-header {
   :root .unified-dialog-header .unified-dialog-text :is(h2,h3,.dialog-title,strong) { font-size: 16px; }
   :root .unified-dialog-header .help-search { order: 2; flex: 1 0 100%; width: 100%; max-width: none; }
 }
+/* Keep long file paths inside the history dialog without displacing its controls. */
+:root .file-history-dialog .unified-dialog-header { min-width: 0; flex-wrap: nowrap; }
+:root .file-history-dialog .unified-dialog-header .unified-dialog-text { flex-basis: 0; }
+:root .file-history-dialog .unified-dialog-header .unified-dialog-text h2 {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
 :root .cred-hero:has(> .unified-dialog-header) { padding: 0 0 14px; background: var(--app-dialog-bg); }
 :root .cred-hero:has(> .unified-dialog-header) > :is(.cred-hero-copy,.cred-security-note) { margin: 12px 18px 0; }
 :root { --dialog-close-hover-ink: var(--color-danger); }
diff --git a/src/lib/components/FileHistoryDialog.svelte b/src/lib/components/FileHistoryDialog.svelte
index 1169cb9..ce67cb1 100644
--- a/src/lib/components/FileHistoryDialog.svelte
+++ b/src/lib/components/FileHistoryDialog.svelte
@@ -52,7 +52,7 @@
       <div class="file-history-dialog-icon unified-dialog-icon" aria-hidden="true"><History size={19} /></div>
       <div class="file-history-dialog-heading unified-dialog-text">
         <span class="eyebrow">File history</span>
-        <h2 id="file-history-dialog-title">{fileName(filePath)}</h2>
+        <h2 id="file-history-dialog-title" title={fileName(filePath)}>{fileName(filePath)}</h2>
         <span class="file-history-dialog-path" title={filePath}>{filePath}</span>
       </div>
       <button class="dialog-icon-button" type="button" onclick={onClose} disabled={isBusy} aria-label="Close file history">