From 94469cd60e3f76530dd8c6ce547bf7fc70117dcd Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <florent.tapponnier@gmail.com>
Date: Sat, 23 May 2026 16:24:12 +0200
Subject: [PATCH] fix: distribution chart identity column - tighter widths +
 right-aligned

User report: short provider names (BNB / TON / SUI) left a wide white
gap between the name and the start of the track because the identity
column reserved 10-14 rem. Two changes:

- Shrink the column min/max from minmax(8rem,11rem) / minmax(10rem,14rem)
  to minmax(6rem,9rem) / minmax(7rem,10rem). The long-name case
  (Hyperliquid, Cloudflare) still fits via truncate.
- Right-align the identity span (justify-end). The logo + name now sit
  flush against the track start. Empty space slides to the left edge
  of the row where it's off the eye's reading path, not in the middle
  of the row.
---
 src/components/distribution-chart.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/distribution-chart.tsx b/src/components/distribution-chart.tsx
index 14461ba6..4a418adb 100644
--- a/src/components/distribution-chart.tsx
+++ b/src/components/distribution-chart.tsx
@@ -86,11 +86,16 @@ export function DistributionChart({
                 }
               }}
               title={methodologyTooltip(r, isOff)}
-              className={`grid grid-cols-[minmax(8rem,11rem)_1fr_3.5rem_3.5rem] sm:grid-cols-[minmax(10rem,14rem)_1fr_4rem_4rem] items-center gap-3 sm:gap-4 py-3 border-b border-rule/50 last:border-b-0 cursor-pointer transition-colors hover:bg-paper-soft/40 ${
+              className={`grid grid-cols-[minmax(6rem,9rem)_1fr_3rem_3rem] sm:grid-cols-[minmax(7rem,10rem)_1fr_3.5rem_3.5rem] items-center gap-3 sm:gap-4 py-3 border-b border-rule/50 last:border-b-0 cursor-pointer transition-colors hover:bg-paper-soft/40 ${
                 isOff ? "opacity-40" : ""
               }`}
             >
-              <span className="flex items-center gap-2 min-w-0">
+              {/* Identity column right-aligned: pushes the logo+name flush
+                  against the track start so the eye reads
+                  name → track without a white gap to cross. Empty space
+                  (when name is short like 'BNB') stays on the LEFT
+                  edge of the row where it's off the visual path. */}
+              <span className="flex items-center gap-2 min-w-0 justify-end">
                 <ProviderLogo slug={r.slug} name={r.name} size={18} />
                 <span
                   className={`font-sans font-medium text-[12.5px] truncate ${