Modal position inside UIShell with a Header

[albertms10]

Summary

As described in carbon-design-system/carbon-components-svelte#309, the position of a modal opened inside a UIShell Content with Header hides some modal elements in some scenarios.

Justification

In desktop, as the screen size is big enough, the modal is just clipped some pixels in its bottom side, but on mobile, it hides the footer action buttons, making it unusable.

Desired UX and success metrics

The modal should be positioned according to the actual Content size, taking the Header height into account.

"Must have" functionality

—

Specific timeline issues / requests

—

Available extra resources

A possible workaround like this one could fix the issue, leading to a properly centred Modal window:

/* for explanatory purposes */
:root {
  --header-height: 3rem;
}

.bx--modal-container {
  position: relative;
  bottom: calc(var(--header-height) / 2);
  height: calc(90% - var(--header-height));
}

Carbon is a collaborative system. We encourage teams to build components and
submit them for integration as either add-ons or core components.

[andreancardona]

@albertms10 hello! So sorry for the late reply here - I've made a quick sandbox with the modal inside the UIShell with the header: https://codesandbox.io/s/header-base-kf3h4?from-embed=&file=/src/index.js&resolutionWidth=320&resolutionHeight=675

I don't see the exact issue. Do you mind adding to the codesandbox above to replicate the bug. Thank you!