CreateFullPage button bar isn't accessible but requires scrolling

[modean]

What package(s) are you using?

"@carbon/colors": "11.21.0",
"@carbon/ibm-products": "2.34.0",
"@carbon/layout": "11.21.0",
"@carbon/react": "1.54.0",
"@carbon/styles": "1.54.0",
"@carbon/themes": "11.34.0",
"@carbon/type": "11.26.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "6.22.3"

Detailed description

Describe in detail the issue you're having.

If using the CreateFullPage component together in an app that uses the Carbon UI Shell and the PageHeader component, the button bar of the CreateFullPage component is not visible. Instead the user has to scroll to be able to access the buttons on the button bar.

The scrolling happens despite the fact, that the complete UI would fit into the real estate area of the browser. The horizontal scrollbar vanishes once the SidePanel component is in open state.

Note: There's also a horizontal scrollbar due to the SidePanel component being used.

Is this issue related to a specific component?

I suspect it is related to CreateFullPage component and how it calculates its height. I.e. the height seems to be set via a style property that uses CSS calc().

What did you expect to happen? What happened instead? What would you like to see changed?

The button bar should be visible and thus accessible without the need to scroll down.

What browser are you working in?

Chrome 123.0.6312.105 (Official Build) (arm64) Firefox 124.0.2 (64-bit)

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using?

"@carbon/ibm-products": "2.34.0"

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

n/a

Steps to reproduce the issue

I created a CodeBox at the following location to replicate the issue.

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/SidePanel

See above.

Additional information

The point to understand from the images is that the screenshot that has the buttonbar is missing the upper part of the screen due to the scrolling.

[makafsal]

@modean This should be handled from the app side. Please see: https://codesandbox.io/p/devbox/createfullpage-with-global-header-jcycv5

If you've any questions feel free to ping in Slack.

[modean]

Hi @makafsal I have something similar (e.g. calculating the height in the stylesheet) already in place cause we wanted to move forward. Tho I considered it a hack that we had to introduce.

[makafsal]

@modean Then no worries that is the way to handle it for now.