webui: improve diff view header layout and compactness
Consolidate diff view header layout for better space efficiency and improved
visual organization of commit range selectors and file count display.
Changes:
1. Move file count to same line as commit range selectors
2. Reduce per-file header padding from 12px to 8px
3. Shorten commit selector entries to prevent overflow
4. Change file count text from 'N files changed' to 'N files'
5. Prevent file count text from wrapping with white-space: nowrap
Layout improvements create more compact header while maintaining usability.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s54d391a2d5128fd4k
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index f655933..185db7b 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -185,18 +185,13 @@
.range-row {
width: 100%;
display: flex;
- }
-
- .file-row {
- width: 100%;
- display: flex;
- justify-content: space-between;
align-items: center;
- gap: 10px;
+ gap: 12px;
}
sketch-diff-range-picker {
- width: 100%;
+ flex: 1;
+ min-width: 0;
}
sketch-diff-file-picker {
@@ -264,7 +259,7 @@
.file-header {
background-color: var(--background-light, #f8f8f8);
border-bottom: 1px solid var(--border-color, #e0e0e0);
- padding: 12px 16px;
+ padding: 8px 16px;
font-family: var(--font-family, system-ui, sans-serif);
font-weight: 500;
font-size: 14px;
@@ -365,6 +360,8 @@
background-color: var(--background-light, #f8f8f8);
border-radius: 4px;
border: 1px solid var(--border-color, #e0e0e0);
+ white-space: nowrap;
+ flex-shrink: 0;
}
.loading,
@@ -482,12 +479,9 @@
.gitService="${this.gitService}"
@range-change="${this.handleRangeChange}"
></sketch-diff-range-picker>
- </div>
-
- <div class="file-row">
<div class="file-count">
${this.files.length > 0
- ? `${this.files.length} file${this.files.length === 1 ? "" : "s"} changed`
+ ? `${this.files.length} file${this.files.length === 1 ? "" : "s"}`
: "No files"}
</div>
</div>