Limit max width of FR legend tooltip labels (#948)

This commit is contained in:
Marshall Polaris 2022-09-27 22:25:37 -07:00 committed by GitHub
parent f52127237e
commit 5b54e7d468
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -88,12 +88,12 @@ const Legend = (props: { className?: string; items: LegendItem[] }) => {
<ol className={className}> <ol className={className}>
{items.map((item) => ( {items.map((item) => (
<li key={item.label} className="flex flex-row justify-between"> <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 <span
className="mr-2 h-4 w-4" className="mr-2 h-4 w-4 shrink-0"
style={{ backgroundColor: item.color }} style={{ backgroundColor: item.color }}
></span> ></span>
{item.label} <span className="overflow-hidden text-ellipsis">{item.label}</span>
</Row> </Row>
{item.value} {item.value}
</li> </li>
@ -275,7 +275,7 @@ export const MultiValueHistoryChart = (props: {
{mouseState && ( {mouseState && (
<ChartTooltip {...mouseState}> <ChartTooltip {...mouseState}>
{fmtX(mouseState.p[0])} {fmtX(mouseState.p[0])}
<Legend className="text-sm" items={legendItems} /> <Legend className="max-w-xs text-sm" items={legendItems} />
</ChartTooltip> </ChartTooltip>
)} )}
<SVGChart <SVGChart