[SidePanel]: `2xl` size causes action buttons to stack vertically and adds unnecessary padding

[tomjp]

Package

Carbon for IBM Products

Description

When setting the size of SidePanel to 2xl, the action buttons are unexpectedly stacked vertically. In addition, unnecessary padding appears above the buttons.

Component(s) impacted

SidePanel

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v2.79.0

Suggested Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

IBM Semiconductors

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-ctave8qt?file=src%2FExample%2FExample.jsx

Steps to reproduce the issue (if applicable)

This can be reproduced in the Carbon for IBM Products Storybook:

1. Open the following URL:
   https://ibm-products.carbondesignsystem.com/?path=/story/components-sidepanel--slide-over&args=actions:3;size:2xl

2. Set the props as follows:
   size: 2xl
   actions: Any option other than None

Screenshot:

• size: 2xl, actions: One button
  → Unnecessary padding appears above the button.

  

• size: 2xl, actions: Two buttons
  → Buttons not only have unnecessary padding above them but are also stacked vertically.

  

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[jlongshore]

Inspecting the footer here, it appears there is a specific CSS rule to set the flex direction to "column". Consulted with design and they didn't seem to think there was anything in the guidance that would require this specific rule to be applied to the 2xl size. A simple fix would be to remove the specific CSS rule...

Current state:

Potential fix: