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>