From abfba55958e2bec2e5640de8e99273748c3a2fa4 Mon Sep 17 00:00:00 2001 From: Ricardo Amaral Date: Tue, 23 Apr 2024 16:46:30 +0100 Subject: [PATCH] chore: Release 23.2.1 in 24.1.4-beta --- CHANGELOG.md | 4 ++++ package-lock.json | 4 ++-- package.json | 2 +- src/modal/modal.module.css | 16 +++++++++++++--- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e62777f8..2104b8775 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,10 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduc - [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react +# v23.2.1 + +- [Fix] Adjust modal alignment to the middle of the viewport at `800px` breakpoint for improved UX. + # v23.2.0 - [Feat] Add `medium` as a `weight` option for `Header`. diff --git a/package-lock.json b/package-lock.json index fb0443e9f..193bd6070 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@doist/reactist", - "version": "24.1.3-beta", + "version": "24.1.4-beta", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@doist/reactist", - "version": "24.1.3-beta", + "version": "24.1.4-beta", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 9844e7219..a14391f49 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "email": "henning@doist.com", "url": "http://doist.com" }, - "version": "24.1.3-beta", + "version": "24.1.4-beta", "license": "MIT", "homepage": "https://github.com/Doist/reactist#readme", "repository": { diff --git a/src/modal/modal.module.css b/src/modal/modal.module.css index 3088ec66e..8c49e4e92 100644 --- a/src/modal/modal.module.css +++ b/src/modal/modal.module.css @@ -43,9 +43,6 @@ .overlay.fitContent > [data-focus-lock-disabled] { padding-top: var(--reactist-modal-padding-top); } -.overlay.fitContent > [data-focus-lock-disabled] .container { - max-height: calc(100vh - 2 * var(--reactist-modal-padding-top)); -} .container { box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16); @@ -118,6 +115,19 @@ } } +@media (min-height: 800px) { + .overlay.fitContent > [data-focus-lock-disabled] .container { + max-height: calc(100vh - 2 * var(--reactist-modal-padding-top)); + } +} + +@media (max-height: 800px) { + .overlay.fitContent > [data-focus-lock-disabled] { + padding-top: var(--reactist-spacing-xxlarge); + justify-content: center; + } +} + /* header */ .buttonContainer {