Calcite sheet doesn't allow for scrolling within block-end position

[nick-romano]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

This is a very specific use case, but a useful one in my case. Here's the use case:

• I have a sheet in the block-end position
• The sheet has a small amount of content in it, so it doesn't fill the whole page:

+--------------------------------------+
|                                      |
|                                      |
|            (main content)            |
|                                      |
|                                      |
|--------------------------------------|
|         ┌───────────────┐            |
|         | Sheet Content |            |
|         └───────────────┘            |
+--------------------------------------+

• In this case, we set the following vars:

--calcite-sheet-height: auto;
--calcite-sheet-max-height: 100%;
--calcite-sheet-min-height: auto;

Now comes the fun:

As the page's height gets smaller, eventually the sheet content can get taller than the height of the page and thus overflows, for example:

        ┌───────────────┐            
        |               |            
        | Sheet Content |            
        |   (too tall)  |            
        |               |            
        |               |            
        |               |            
+--------------------------------------+
|         |                            |
|         |                            |
|         |                             
|         └───────────────┘            |
+--------------------------------------+
   ↑ Sheet content overflows at top

The issue here is that while max-height is set to 100%, the overflow at the top of the sheet content gets hidden because of the following overflow-hidden declaration:

calcite-design-system/packages/calcite-components/src/components/sheet/sheet.scss

Lines 181 to 183 in c4c4fcc

	.content-container {
	@apply flex flex-1 relative max-h-full max-w-full overflow-hidden;
	}

Thus the overflow is lost above the page, and the user is unable to scroll to see the overflowing content.

Expected Behavior

with the following styles:

--calcite-sheet-height: auto;
--calcite-sheet-max-height: 100%;
--calcite-sheet-min-height: auto;

The sheet should:

• grow in height to fit the content within the sheet.
• Stop growing at 100% height
• scroll once the sheet content hits > 100% height

Reproduction Sample

https://codepen.io/nick-romano/pen/zxGyjPW

Reproduction Steps

1. Adjust the amount of "filler" with the slider
2. Notice how the sheet doesn't scroll after reaching 100% height
3. change the overflow on the sheet's shadow element below: (from hidden to auto) to see desired outcome

Reproduction Version

3.2.1

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[nick-romano]

cc: @macandcheese

[ekenes]

@macandcheese and @nick-romano I'm tracking to verify in the arcade editor component after it picks up the version of calcite that fixes this issue.