Improve immersive Modal display on iOS

[connor-baer]

Addresses this Slack thread.

Purpose

Reported by @chaserunner:

We have an issue with notification banner component, it’s not respecting safe-area-insets when displayed in iOS web view. And is covered by the components in the window. Probably this also reproducible in safari.

Reported by @Zayebatsu:

Is there a possibility to have a higher modal on mobile than 80vh? eg. on this modal we have a lot of content and 80vh is not enough to display all without scroll

Approach and changes

• Add bottom padding to the modal content to clear any browser chrome overlays
• Remove a previous workaround that limited modals to 80vh on iOS (Fixes in the Modal #1070)

Note: Best viewed without whitespace changes

Definition of done

• Development completed
• Reviewers assigned
• Unit and integration tests
• Meets minimum browser support
• Meets accessibility requirements

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup/oss-circuit-ui/GDBq1okFJGCdG4WjzwLdh312XtHh
✅ Preview: https://oss-circuit-ui-git-bugfix-modal-ios-sumup.vercel.app

[changeset-bot]

🦋 Changeset detected

Latest commit: 7658274

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sumup/circuit-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Merging #1087 (7658274) into next (c1a00e3) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             next    #1087   +/-   ##
=======================================
  Coverage   91.54%   91.54%           
=======================================
  Files         165      165           
  Lines        2908     2908           
  Branches      855      855           
=======================================
  Hits         2662     2662           
  Misses        233      233           
  Partials       13       13           

Impacted Files	Coverage Δ
packages/circuit-ui/components/Modal/Modal.tsx	81.08% <100.00%> (ø)

[connor-baer]

@robinmetral This did the trick for fullscreen on iOS: by setting both top and bottom to 0, we can use 100% instead of 100vh.

[robinmetral]

✨

[chaserunner]

@robinmetral amazing work! thanks for so quick reaction 🚀