BorderBoxControl: Horizontal scrollbar is displayed in block sidebar

[t-hamano]

Description

Note: This can be reproduced on Windows OS/Chrome browser where the browser scrollbar has a physical width.

The sidebar width is 280px. However, due to a 17px scrollbar on Windows OS/Chrome browser, the actual content width is 263px. In this case, the box control does not fit into the grid layout and an overflow occurs.

Step-by-step reproduction instructions

Access a block that supports borders and click the "Unlink sides" button.

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[mirka]

Good catch!

FYI, macOS also has a setting to show scrollbars with a physical width (which I have enabled), so this is not necessarily a Windows-only issue.

[mirka]

@WordPress/gutenberg-design Looks like we need some design tweaks here. The current component compresses down to 248px width, but with a scrollbar it needs to compress down to 231px (in the Windows case, 233px on Mac).

[jasmussen]

Did we end up making a final decision on gap width? 8, 12 or 16?

Regardless, if we make a few tweaks we still get a fairly ergonomic control at 237px.

12px gap, that could be reserved for the "exploded" view here.

Instead of the unit selector having an 8px right margin, it has a 4px right margin:

And the width of the inputs is changed from 116px to 112px.

[jameskoster]

It would be good to somehow eliminate any hard-coded width values so that we avoid running into this issue again in the future. Ideally the whole component should gracefully adapt to the container.

[jasmussen]

The fixed width would be good to eliminate indeed, though I suspect it's a vestige of that partiucular exploded border view, so beyond replacing those with percentages, which we can, it's still going to be a bit tight.

By the way the numberes above assume we want to be able to show 4 digits in the field at all times. If we think 999px borders is as much as anyone needs to see, then there's more room still.

[t-hamano]

Thanks everyone for the feedback.

I tried simply narrowing the width of the input field until it fits the 231px container width. In my environment, the 4th digit is slightly visible.

[mirka]

I tried simply narrowing the width of the input field until it fits the 231px container width. In my environment, the 4th digit is slightly visible.

I think that should be fine. I doubt people will set borders over two-digit pixels.