Limit max width of FR legend tooltip labels (#948)
This commit is contained in:
parent
f52127237e
commit
5b54e7d468
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue
Block a user