Modal: fix overflow on mobile when content too large

[LostABike]

Changes

Added max-height to iui-dialog-content because the content was going out of screen/overflow for smaller screens.

This is not a complete PR. The issue with setting max-height for dialog content is that in the case of full screen, it would affect the position of the buttons, because they are placed below the content and not relative to the full page (I might be overthinking this and that it is on the user to place their buttons to the right position...)

Alternatively, I tried setting max-height to inherit instead, which I think makes sense to have content min-height inherit from parents which is the dialog box that contains it, and that works for full screen. However because the content position is a bit below the dialog box, this is what happens

So a possible solution would be to do something like max-height: inherit - 20px, basically says content max-height is whatever the parent (dialog container) max-height is, but a bit smaller. But inherit - something is not a thing. Is something equivalence to that?

closes #425

Testing

Docs

[FlyersPh9]

I pulled this branch locally and ran it in the iOS Simulator to investigate.

I think part of the reason we're facing this issue is because the default dialog does not have display: flex set. After adding these 2 lines & removing 1 line, it appears to fix the issue:

@mixin iui-dialog {
+ display: flex;
+ flex-direction: column;
  ...
}

@mixin iui-dialog-content {
  …
- max-height: 70vh;
}

If we add that, we could then remove those duplicated lines within @mixin iui-dialog-full-page & @mixin iui-dialog-draggable.

However, I think there was a reason we didn't do this. Would changing the default dialog from display: block to display: flex be considered a breaking change?

[mayank99]

@FlyersPh9 See above where I said:

I just realized we didn't add display: flex on the regular dialog to keep backwards compatibility with an older version where Dialog.Content was optional.