From 5b54e7d468d1112fb4a4ef4ae9d6ebd2441cce84 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Tue, 27 Sep 2022 22:25:37 -0700
Subject: [PATCH] Limit max width of FR legend tooltip labels (#948)

---
 web/components/charts/generic-charts.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx
index 2bb5e089..05c26a42 100644
--- a/web/components/charts/generic-charts.tsx
+++ b/web/components/charts/generic-charts.tsx
@@ -88,12 +88,12 @@ const Legend = (props: { className?: string; items: LegendItem[] }) => {
     <ol className={className}>
       {items.map((item) => (
         <li key={item.label} className="flex flex-row justify-between">
-          <Row className="mr-4 items-center">
+          <Row className="mr-2 items-center overflow-hidden">
             <span
-              className="mr-2 h-4 w-4"
+              className="mr-2 h-4 w-4 shrink-0"
               style={{ backgroundColor: item.color }}
             ></span>
-            {item.label}
+            <span className="overflow-hidden text-ellipsis">{item.label}</span>
           </Row>
           {item.value}
         </li>
@@ -275,7 +275,7 @@ export const MultiValueHistoryChart = (props: {
       {mouseState && (
         <ChartTooltip {...mouseState}>
           {fmtX(mouseState.p[0])}
-          <Legend className="text-sm" items={legendItems} />
+          <Legend className="max-w-xs text-sm" items={legendItems} />
         </ChartTooltip>
       )}
       <SVGChart