Modal position inside UIShell with a Header

[albertms10]

Description

When opening a Modal in a UIShell with a Header, it is positioned as if no Header was present, only taking into account a max-height: 90% of its parent. Therefore, the Modal footer is cut when the screen is not tall enough.

Moreover, when opening it in a mobile device, it is far taller and the footer is never shown, as the body is not scrollable due to the bx--body--with-modal-open class.

Question

Should the Header component be hidden behind the modal, filling the whole viewport size? Or maybe just shrink the height of the modal and vertically centre it inside the Content component?

[metonym]

This is probably a design decision by Carbon. https://github.com/carbon-design-system/carbon/issues

[albertms10]

Aside from being a design decision by Carbon, 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));
}