From c368ca69cb2d480a364b4e85f0ebbb66959580d4 Mon Sep 17 00:00:00 2001
From: Jer Miller <jeremie.miller@gmail.com>
Date: Sun, 12 Apr 2026 21:19:59 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20tokens=20dashboard=20visual=20alignment?=
 =?UTF-8?q?=20=E2=80=94=20tabular-nums,=20percent=20bar=20tracks,=20min-wi?=
 =?UTF-8?q?dth?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add font-variant-numeric: tabular-nums to monospace numeric cells for even digit widths
- Wrap percent bars in a .percent-track container (light gray rounded rectangle, 100px fixed width)
- Add min-width: 2px to .percent-bar so near-zero values show a visible sliver
- Move margin-right and vertical-align from .percent-bar to .percent-track
---
 apps/tokens/workspace.html | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/tokens/workspace.html b/apps/tokens/workspace.html
index 442882ddf..18ff66cda 100644
--- a/apps/tokens/workspace.html
+++ b/apps/tokens/workspace.html
@@ -229,6 +229,7 @@
 .breakdown-table td.num,
 .breakdown-table td .cost-value {
   font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  font-variant-numeric: tabular-nums;
 }
 
 .breakdown-section {
@@ -376,13 +377,23 @@
   color: #cd7f32;
 }
 
+.percent-track {
+  display: inline-block;
+  width: 100px;
+  height: 1em;
+  background: #f0f0f0;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 0.5em;
+  overflow: hidden;
+}
+
 .percent-bar {
   display: inline-block;
   height: 1em;
   background: linear-gradient(90deg, var(--bar-color) 0%, var(--bar-color) 100%);
   border-radius: 3px;
-  margin-right: 0.5em;
-  vertical-align: middle;
+  min-width: 2px;
 }
 
 .cost-value {
@@ -580,8 +591,8 @@ function escapeHtml(val) {
 // Create percent bar
 function createPercentBar(percent, color) {
   const safeColor = /^#[0-9a-fA-F]{3,6}$/i.test(color) ? color : '#999';
-  const width = Math.min(100, Math.max(0, percent * 2)); // Scale for visual effect
-  return `<span class="percent-bar" style="--bar-color: ${safeColor}; width: ${width}px;" aria-hidden="true"></span>`;
+  const width = Math.min(100, Math.max(0, percent * 2));
+  return `<span class="percent-track" aria-hidden="true"><span class="percent-bar" style="--bar-color: ${safeColor}; width: ${width}px;"></span></span>`;
 }
 
 function sortData(tableId, data) {
-- 
2.51.2