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.
This commit is contained in:
2026-09-22 11:28:45 +02:00
parent aec0d431f9
commit baa226d536
2 changed files with 9 additions and 2 deletions
+8 -1
View File
@@ -3647,6 +3647,7 @@
.compare-dialog-backdrop { z-index: 80; } .compare-dialog-backdrop { z-index: 80; }
.file-history-dialog { .file-history-dialog {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
width: min(780px, calc(100vw - 32px)); width: min(780px, calc(100vw - 32px));
height: min(720px, calc(100vh - 32px)); height: min(720px, calc(100vh - 32px));
@@ -3695,7 +3696,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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-list { height: 100%; padding: 6px; overflow: auto; }
.file-history-dialog-row { .file-history-dialog-row {
display: grid; 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 .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; } :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) { 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 .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); } :root { --dialog-close-hover-ink: var(--color-danger); }
+1 -1
View File
@@ -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-icon unified-dialog-icon" aria-hidden="true"><History size={19} /></div>
<div class="file-history-dialog-heading unified-dialog-text"> <div class="file-history-dialog-heading unified-dialog-text">
<span class="eyebrow">File history</span> <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> <span class="file-history-dialog-path" title={filePath}>{filePath}</span>
</div> </div>
<button class="dialog-icon-button" type="button" onclick={onClose} disabled={isBusy} aria-label="Close file history"> <button class="dialog-icon-button" type="button" onclick={onClose} disabled={isBusy} aria-label="Close file history">