The FontSizeControl uses CSS Grid to render it's inner UI. This works to keep the elements tidy. However, it restricts the ability to gracefully handle the rendering of longer translation labels (see screenshot above)
With some experimentation, I was able to adjust it to look like this:
(Screenshot of Google translated German labels)
Original English labels:
Flex wrap
This involved swapping Grid -> HStack, and enhancing how Flex/HStack handles wrapping.
Previously, Flex only provided margin gaps on one axis (either x for horizontal, or y for vertical).
With the updated <Flex wrap />, the gap value is now applied on both x and y to accommodate wrapped content.
This solution seems to work well. However, it involves quite a bit of manual CSS for the individual children of HStack.
Originally reported (https://github.com/WordPress/gutenberg/issues/28612)
The
FontSizeControluses CSS Grid to render it's inner UI. This works to keep the elements tidy. However, it restricts the ability to gracefully handle the rendering of longer translation labels (see screenshot above)With some experimentation, I was able to adjust it to look like this:
(Screenshot of Google translated German labels)
Original English labels:
Flex
wrapThis involved swapping
Grid->HStack, and enhancing howFlex/HStackhandles wrapping.Previously,
Flexonly provided margin gaps on one axis (eitherxfor horizontal, oryfor vertical). With the updated<Flex wrap />, thegapvalue is now applied on bothxandyto accommodate wrapped content.This solution seems to work well. However, it involves quite a bit of manual CSS for the individual children of
HStack.