From fc6f417cc6395ce01d8a938aab6fe2516fc34d22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Mon, 29 Jun 2026 10:58:18 -0300
Subject: [PATCH] Refine seller chart legend

---
 src/pages/Dashboard.tsx | 52 +++++++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 7576d8a..b241ccb 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -639,29 +639,35 @@ const Dashboard = () => {
               </ResponsiveContainer>
             </div>
 
-            <div className="mt-5 flex flex-wrap gap-2 border-t border-dark-border pt-4">
-              {sellerTimeSeries.sellers.map(seller => {
-                const isFocused = effectiveFocusedSellerId === seller.id;
-                const isDimmed = Boolean(effectiveFocusedSellerId && !isFocused);
-                return (
-                  <button
-                    key={`seller-legend-${seller.id}`}
-                    type="button"
-                    onClick={() => setFocusedSellerId(current => current === seller.id ? null : seller.id)}
-                    className={`flex max-w-full cursor-pointer items-center gap-2 rounded-full border px-3 py-2 text-left transition-colors ${
-                      isFocused
-                        ? 'border-dark-text bg-dark-input text-dark-text'
-                        : 'border-dark-border bg-dark-input/40 text-dark-muted hover:bg-dark-input hover:text-dark-text'
-                    }`}
-                    style={{ opacity: isDimmed ? 0.48 : 1 }}
-                    title={seller.name}
-                  >
-                    <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: seller.fill }} />
-                    <span className="max-w-[220px] truncate text-sm font-bold">{seller.name}</span>
-                    <span className="shrink-0 text-xs font-bold opacity-75">{sellerMetricConfig.formatTick(seller.total)}</span>
-                  </button>
-                );
-              })}
+            <div className="relative mt-5 border-t border-dark-border pt-3">
+              <div className="flex h-8 items-center gap-5 overflow-x-auto overflow-y-hidden whitespace-nowrap pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+                {sellerTimeSeries.sellers.map(seller => {
+                  const isFocused = effectiveFocusedSellerId === seller.id;
+                  const isDimmed = Boolean(effectiveFocusedSellerId && !isFocused);
+
+                  return (
+                    <button
+                      key={`seller-legend-${seller.id}`}
+                      type="button"
+                      onClick={() => setFocusedSellerId(current => current === seller.id ? null : seller.id)}
+                      className={`group inline-flex h-7 shrink-0 cursor-pointer items-center gap-2 rounded-md px-1.5 text-left transition-colors ${
+                        isFocused
+                          ? 'bg-dark-input/70 text-dark-text'
+                          : 'text-dark-muted hover:text-dark-text'
+                      }`}
+                      style={{ opacity: isDimmed ? 0.38 : 1 }}
+                      title={seller.name}
+                    >
+                      <span className="h-1.5 w-5 shrink-0 rounded-full" style={{ backgroundColor: seller.fill }} />
+                      <span className="max-w-[190px] truncate text-xs font-bold">{seller.name}</span>
+                      <span className="shrink-0 text-[11px] font-bold text-dark-muted group-hover:text-dark-text">
+                        {sellerMetricConfig.formatTick(seller.total)}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="pointer-events-none absolute bottom-0 right-0 top-3 w-10 bg-gradient-to-l from-dark-card to-transparent" />
             </div>
           </div>
         ) : (