Problem:
Tank names vary in length, because of this we hack around it by truncating/giving it a fixed width for the first column, this solution is suboptimal for the vast amount of mfd resolutions.
Solution:
Put the tanks in a table, with this solution the first column width will be determined by the longest tank name.
Additional challenges:
These components are wrapped by a paginator component that expects multiple children (the tanks). The paginator breaks when wrapping the children with a table component.
Problem: Tank names vary in length, because of this we hack around it by truncating/giving it a fixed width for the first column, this solution is suboptimal for the vast amount of mfd resolutions.
Solution: Put the tanks in a table, with this solution the first column width will be determined by the longest tank name.
Additional challenges: These components are wrapped by a paginator component that expects multiple children (the tanks). The paginator breaks when wrapping the children with a table component.
See experiment in this branch: https://github.com/victronenergy/venus-html5-app/tree/temp/refactor-tank-gauges-to-table