Twenty Twenty-One: Vertical buttons block has the wrong width

[poena]

Vertical layout for the buttons block was added in 5.7 (Gutenberg 9.6).

When the buttons block is transformed to vertical,
the width of the inner button block is incorrect,
it is full width instead of adapting to the text length.

Steps to reproduce:
In the block editor, add a buttons block with more than one button.
Select the "Transform to variation" option in the block settings sidebar.
Select vertical.
See that the buttons are presented vertically but that the width of the button changes.
Save and view the front to confirm the issue.

Go back to the editor and try other block settings, save and view the front to confirm.
When a justification is set, the width of the block is reduced again and adapts to the text length.
If a width is set on the individual buttons, the setting is applied correctly.

No issues were found with the vertical buttons block in the other default themes.

[poena]

Vertical buttons, front

[poena]

Vertical buttons, editor

[poena]

Remove display:block from the inner button block

[poena]

With patch applied, editor

[poena]

With patch applied, front

[poena]

The correct front screenshot...

[paaljoachim]

Testing a local dev site in Chrome.
Twenty Twenty One.
WP 5.6.1
Gutenberg plugin: 9.8.4

The result. I did not at first click any alignment, but I noticed no change clicking the various alignments. Here is a gif.

[paaljoachim]

Looking at buttons width in 2021

[jeroenrotty]

Tested the patch with @rolfsiebers and it all seems to work correctly, the width of all buttons are correct - alignments are working too and setting a custom width on a specific button works as expected too.

[hellofromTonya]

Removing needs-testing. Thank you everyone for testing.

[peterwilsoncc]

In 50261:

Twenty Twenty-One: Adapt vertical buttons to text length.

Display vertically aligned buttons as inline elements.

Props poena, paaljoachim, hellofromTonya, jeroenrotty, rolfsiebers.
Fixes #52432.