Carbon: Modal with a single child has padding that causes scrolling issue

[abvte]

Sandbox here: https://codesandbox.io/s/webpack-starter-c9g77

I have a modal with a single span element inside. For some reason, I'm able to scroll down to the point where the element disappears if there is only one line of text.

Start:

After scrolling:

I believe it's because of this styling:

.bx--modal-content>*:last-child {
    padding-bottom: 2rem;
}

[asudoh]

@aagonzales Wondering if we should remove the bottom padding for certain scenarios (e.g. for smaller real-screen estates)... Thoughts?

[aagonzales]

I'm not sure why the scrolling is happening, why would that bottom-padding be effecting that? We want to keep the bottom padding even on smaller screens to help the content from being too close the buttons. There seems to be enough space on the screen for it not to scroll. Is it because the heading is not being used? If its only one line of text, you should be using the title only style anyways.

[abvte]

@aagonzales Even if it's more than one line of text, it still scrolls (i've updated the codesandbox to reflect that).

[abvte]

The padding-bottom is causing the text to overflow, then causing the scrollbar to appear.

[abbeyhrt]

The padding-bottom from the last-of-child is separate from what's keeping the content far enough from the buttons. I added the padding to the last child so that the overflow-indicator doesn't overlap the text at the end of the scrolling content when hasScrollingContent is set to true. Since it's causing problems when the overflow indicator isn't there, I believe I can just change it to not show up if hasScrollingContent is false.