fix(site): stretch stat badges vertically to fill wrapper

fix(site): reduce stat badge inline padding to match vertical
fix(site): polish diff header padding, stat badge borders, and gutter line color
2026-03-23 21:37:09 +00:00 · 2026-03-23 21:29:56 +00:00 · 2026-03-23 21:20:18 +00:00
1 changed files with 9 additions and 11 deletions
--- a/site/src/components/ai-elements/tool/utils.ts
+++ b/site/src/components/ai-elements/tool/utils.ts
@@ -166,6 +166,7 @@ const SELECTION_OVERRIDE_CSS = [
 	"  --diffs-bg-selection-override: hsl(var(--content-link) / 0.08);",
 	"  --diffs-bg-selection-number-override: hsl(var(--content-link) / 0.13);",
 	"  --diffs-selection-number-fg: hsl(var(--content-link));",
+	"  --diffs-gap-style: 1px solid hsl(var(--border-default));",
 	"}",
 	// Direct rules that override both context and change-line
 	// selection backgrounds so every selected line looks the same.
@@ -239,7 +240,7 @@ const DIFF_HEADER_CSS = [
 	"  font-size: 13px;",
 	"  min-height: 32px !important;",
 	"  padding-block: 0 !important;",
-	"  padding-inline: 12px !important;",
+	"  padding-inline: 10px !important;",
 	"  border-bottom: 1px solid hsl(var(--border-default));",
 	"}",

@@ -283,7 +284,12 @@ const DIFF_HEADER_CSS = [
 	// Stat counts styled as compact pill badges.
 	"[data-diffs-header] [data-metadata] {",
 	"  flex-direction: row-reverse;",
+	"  align-items: stretch;",
 	"  gap: 0 !important;",
+	"  padding: 0;",
+	"  border: 1px solid hsl(var(--border-default));",
+	"  border-radius: 3px;",
+	"  overflow: hidden;",
 	"}",
 	"[data-diffs-header] [data-additions-count],",
 	"[data-diffs-header] [data-deletions-count] {",
@@ -291,8 +297,8 @@ const DIFF_HEADER_CSS = [
 	"  font-size: 12px;",
 	"  font-weight: 500;",
 	"  line-height: 20px;",
-	"  padding-inline: 6px;",
-	"  border-radius: 3px;",
+	"  padding-inline: 4px;",
+	"  border-radius: 0;",
 	"}",
 	"[data-diffs-header] [data-additions-count] {",
 	"  color: hsl(var(--git-added-bright)) !important;",
@@ -302,14 +308,6 @@ const DIFF_HEADER_CSS = [
 	"  color: hsl(var(--git-deleted-bright)) !important;",
 	"  background-color: hsl(var(--surface-git-deleted));",
 	"}",
-	// Joined badge: flatten touching inner edges. DOM order is
-	// [deletions][additions]; row-reverse puts additions left.
-	"[data-deletions-count] + [data-additions-count] {",
-	"  border-radius: 3px 0 0 3px;",
-	"}",
-	"[data-deletions-count]:has(+ [data-additions-count]) {",
-	"  border-radius: 0 3px 3px 0;",
-	"}",
 ].join(" ");

 export const diffViewerCSS = [
Author	SHA1	Message	Date
Danielle Maywood	eac5b18c27	fix(site): stretch stat badges vertically to fill wrapper	2026-03-23 21:37:09 +00:00
Danielle Maywood	03c079e68c	fix(site): reduce stat badge inline padding to match vertical	2026-03-23 21:29:56 +00:00
Danielle Maywood	12f6119e28	fix(site): polish diff header padding, stat badge borders, and gutter line color	2026-03-23 21:20:18 +00:00