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-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index aebe6ff..61f9235 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -324,10 +324,38 @@
*/
formatCommitOption(commit: GitLogEntry): string {
const shortHash = commit.hash.substring(0, 7);
- let label = `${shortHash} ${commit.subject}`;
+ // Truncate subject if it's too long
+ let subject = commit.subject;
+ if (subject.length > 50) {
+ subject = subject.substring(0, 47) + "...";
+ }
+
+ let label = `${shortHash} ${subject}`;
+
+ // Add refs but keep them concise
if (commit.refs && commit.refs.length > 0) {
- label += ` (${commit.refs.join(", ")})`;
+ const refs = commit.refs.map((ref) => {
+ // Shorten common prefixes
+ if (ref.startsWith("origin/")) {
+ return ref.substring(7);
+ }
+ if (ref.startsWith("refs/heads/")) {
+ return ref.substring(11);
+ }
+ if (ref.startsWith("refs/remotes/origin/")) {
+ return ref.substring(20);
+ }
+ return ref;
+ });
+
+ // Limit to first 2 refs to avoid overcrowding
+ const displayRefs = refs.slice(0, 2);
+ if (refs.length > 2) {
+ displayRefs.push(`+${refs.length - 2} more`);
+ }
+
+ label += ` (${displayRefs.join(", ")})`;
}
return label;
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>