Skip to content

Fix chart label in Firefox for code insight pie chart

Administrator requested to merge vk/bad-annotation-chart-label-in-firefox into main

Created by: vovakulikov

Fixes: https://github.com/sourcegraph/sourcegraph/issues/20084

I consider this problem came from how Firefox treats empty svg elements without width and height within another svg element with height and width - They usually have width=100% height=100% of parent size even if we put size value from CSS width: 0px; height: 0px; explicitly.

In the first render we're getting a really big value of Text svg height, so we're just stuck with this big initial height value here and therefore have this visual behaviour here.

Possible solution in this PR this is replace innerRef target from svg <Text /> root element to <text /> element which can be measured without this problem.

Problem is Text component comes from @visx/text package. Just not to be blocked by this fixes inside visx packages. I forked this component and added this fix with innerRef. But we have to pull origin component when this problem will be resolved at visx codebase.

Merge request reports