FocalPointPicker unit controls are to small for Swedish translations

[stefanfisk]

Description

<FocalPointPicker> hardcodes the width of <UnitControl> to 100px, which is not enough to fit the Swedish translations of left and top (vänster and toppen).

gutenberg/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js

Line 55 in 502f79a

width: 100px;

Step-by-step reproduction instructions

Switch to Swedish and try adjusting the focal point of a cover block.

Expected behaviour

The strings should fit.

Actual behaviour

The labels are not wide enough to fit the strings.

Screenshots or screen recording

WordPress information

• WordPress version: 5.6
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: macOS 11.1
• Browser: Chrome 88.0.4324.96

[ockham]

cc/ @ItsJonQ 👋 😄

[paaljoachim]

I believe it only needs some CSS adjustments of the space where we see the percentage numbers.

[ItsJonQ]

Apologies! I forgot to follow up on this one. We had a similar issue with the FontSizePicker.
Will see what I can do.

I'm just leave a note saying that I believe this is a symptom of a larger design issue in that we're missing a standardized way to render UI - specifically using grids, horizontal stacking elements, and/or responsive containers.

I don't have an immediate solution. However, the recent inclusion of various layout primitives for the new Component System may help us here.

[lukecarbis]

This appears to be fixed in Gutenberg 10.0.0. (Tested using the RC1 build)

[ItsJonQ]

Thanks @lukecarbis !!

The underlying Flex layout component was recently updated:
#28609.

It's better at adapting to inner content.
It should help for now 👍

P.S. Control labels like that one will be improved some more with this update:
#28568

[paaljoachim]

Tested with WordPress 5.7 RC1
Gutenberg 10.0.2
Twenty Twenty One.

Swedish-Focal-picker-Cover-block.mp4

Issue has been fixed and I will close the issue.