Button Group block - Button alignment issue

[andeng1106]

Describe the bug

• Scenario: When you have a Button Group block with two buttons and you have this setting on Desktop (Layout > Layout > Button Alignment > Vertical), the button group is becoming Horizontal on tablet and mobile instead of Vertical.
  • Same thing happens if you use this setting on tablet only, the button group is becoming Horizontal on mobile
• Issue only happens in frontend
• Issue only happens for tablet and mobile
• Sample Sandbox page: https://gambitsandbox.instawp.xyz/3370-2/

To Reproduce
Steps to reproduce the behavior:

1. Add a new page
2. Add a new Button block
3. Click Enter key to add another button or Duplicate button
4. Select the Button Group block
5. In Inspector, set Layout > Layout > Button Alignment > Vertical in Desktop view
6. Save page and go to frontend
7. See all if all responsive views (Desktop, Tablet, Mobile) has the buttons in vertical alignment
8. See that it doesn't have vertical alignment on tablet and mobile (issue)

Expected behavior

• If I set Layout > Layout > Button Alignment > Vertical in Desktop, it should show as vertical on tablet and mobile
• If I set Layout > Layout > Button Alignment > Vertical in Tablet, it show as vertical in mobile

Screenshots

Screen.Recording.2024-11-20.at.10.mp4