Some of our modals have enough content that when viewed at certain viewport heights, the content is cropped from view, hiding important elements (such as CTA buttons). This happens because we use a dynamic value for "padding" to optimize the placement more towards the top of the viewport, in a way to place modals more or less at eyesight level, while having enough room for dropdowns.
To work around this mechanism for certain modals when the viewport height is not enough to display all the content, this PR adjusts modal alignment to the middle of the screen when a certain breakpoint is reached.
[!IMPORTANT]
We have an ongoing discussion to decide whether this is the way forward or not, but I'll be OOO for more than a week, and won't be around to bring this to the finish line. However, I'm leaving this PR ready if the design team decides to go with this.
PR Checklist
[x] Executed npm run validate and made sure no errors / warnings were shown
[x] Described changes in CHANGELOG.md
[x] Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
[x] Reviewed and approved Chromatic visual regression tests in CI
Short description
Some of our modals have enough content that when viewed at certain viewport heights, the content is cropped from view, hiding important elements (such as CTA buttons). This happens because we use a dynamic value for "padding" to optimize the placement more towards the top of the viewport, in a way to place modals more or less at eyesight level, while having enough room for dropdowns.
To work around this mechanism for certain modals when the viewport height is not enough to display all the content, this PR adjusts modal alignment to the middle of the screen when a certain breakpoint is reached.
PR Checklist
npm run validateand made sure no errors / warnings were shownCHANGELOG.mdpackage.jsonandpackage-lock.json(npm --no-git-tag-version version <major|minor|patch>) ref📸 Demo
https://github.com/Doist/reactist/assets/96476/c53acde9-0769-4d3a-a8bf-f8937b33bf7a
Versioning
Patch. A release would be nice to help with https://github.com/Doist/Issues/issues/13441.