[Bugfix: Text] Fix ballooning SVG dimensions on Firefox

[tfineberg4]

🐛 Bug Fix

Hey guys! Recently noticed that Text's svg wrapper blows up to max width/height on Firefox. This has the impact of inflating the parent container as well, and generally polluting the DOM inaccurately sized containers.

This is an accepted implementation difference between Firefox and Safari/Chrome for SVGs with 0 width/height. And, Text is still displaying correctly. However, this behavior is a barrier in implementing dynamic layouts, since 1 Text element can mess up significant portions of the DOM with inaccurately sized elements. For example, I noticed this issue manifesting via Axis, where it was bubbling up from the tickLabel's Text components.

Visx is so powerful because it abstracts finicky SVG components - so ideally, I think Text should be browser agnostic and handle this svg "quirk" on its own.

Let me know what you think! Thanks!

Axis on Firefox with this issue:

Axis on Firefox after fix:

Axis on Chrome (before and after)