Panel - extra vertical space is present when content does not take up entire height

iyouth23 commented 11 hours ago

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Actual Behavior

calcite-panel will add extra vertical space if its content doesn't take up the entire height of the screen. This is especially visible when I want to set content to have a fixed height while still allowing for scrolling of internal content that exceeds this height.

For example, I want an action-bar inside a calcite-panel, but I want its max-height to be 500px and have overflow-y: scroll.

This is occurring due to a change to calcite-panel in 2.12, where <div class="content-wrapper"> now has position: relative: https://github.com/Esri/calcite-design-system/blob/dev/packages/calcite-components/src/components/panel/panel.scss#L168

Expected Behavior

Extra vertical space should not appear below the content's max-height, and neither should the scrollbar. The panel should snap to the height of the content inside.

Reproduction Sample

https://codepen.io/iyouth66/pen/BaXKYxz

Reproduction Steps

Open this Codepen: https://codepen.io/iyouth66/pen/BaXKYxz?editors=1100
Observe the extra space and scrollbar when the content has a fixed height and the internal content (which should scroll) exceeds the fixed height.

Reproduction Version

2.12.0

Relevant Info

cc @driskull @zaramatheson

Regression?

2.11.0

Priority impact

impact - p1 - need for current milestone

Impact

Map Viewer has many places where we have unnecessary extra vertical space/scrollbars now. See the examples below. We're seeking a fix for this or a workaround in the meantime.