From 6bae4ad89afc2ceef3e9cb9cd9c691b92214aa19 Mon Sep 17 00:00:00 2001 From: jbpenrath Date: Thu, 23 May 2024 18:03:04 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(modal)=20make=20modal=20scrollable?= =?UTF-8?q?=20when=20height=20exceeds=20the=20viewport=20height?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently, if the content of a modal exceeds the viewport height, it is not scrollable. --- .changeset/poor-hats-hammer.md | 5 +++++ packages/react/src/components/Modal/index.scss | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/poor-hats-hammer.md diff --git a/.changeset/poor-hats-hammer.md b/.changeset/poor-hats-hammer.md new file mode 100644 index 0000000..742b1f4 --- /dev/null +++ b/.changeset/poor-hats-hammer.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": patch +--- + +Fix modal scroller height issue that prevent modal to be scrollable with high content diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss index 4571340..000e0fd 100644 --- a/packages/react/src/components/Modal/index.scss +++ b/packages/react/src/components/Modal/index.scss @@ -12,10 +12,12 @@ top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 2em - 6px); + max-height: calc(100% - 2em - 6px); + display: flex; + flex-direction: column; &__scroller { padding: 1.5rem; - max-height: calc(100% - 2em - 6px); overflow: auto; }