Modal: 'top aligned' scrolling issue

[mbakiev]

Bug Report

Modal dialogs with centered={false} (i.e. top aligned CSS class), do not have scroll bars appear when the bottom of the dialog goes out of view. Depending on the size of the dialog, this can obscure the buttons on the bottom of the dialog.

Steps

Create a tall Modal dialog and resize the window until the bottom goes out of view. Scroll bars do not appear for a while.

Expected Result

Have scroll bars, allowing for access to the buttons.

Actual Result

No scrollbar

Version

0.87.2

The problem appears to be in the computation of whether or not the dialog box fits within the viewable area. That calculation is currently based on the size of the dialog box without any padding of the container, or margins of the dialog. So the amount of the dialog that goes out of view is container padding + dialog margin. The margin is 5vh so it is proportional to the size of the container size.

Since adding scrolling class to the Modal causes the margins to change from 5vh to 1rem, it is impossible to simply include the margin in the calculations of whether the Modal fits within the Dimmer. 5vh can be larger than 1rem, so this can cause the Modal to fit within the Dimmer with scrolling but not without, which results in endless flickering as scrolling is added/removed.

The 2 solutions I see:

1. Copy the Semantic-UI Modal fit algorithm to Semantic-UI-react. They use a magic value of 100px to account for paddings/margins:
   https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/modal.js#L620
   paddingHeight is just 50px magic value.

2. Add scrolling unconditionally to the Dimmer/Modal. I'm unsure of the implications of doing this, can someone more experienced with CSS, or scrolling class on Modal comment on whether this is a viable solution?

Meanwhile, I'm going to submit a PR for #1 solution, adding 100px value to account for paddings/margins, and stay consistent with original implementation.