From 9b19f66c0058bf648197d477dcbbc3534822f95e Mon Sep 17 00:00:00 2001 From: Pascal Wengerter Date: Tue, 23 Apr 2024 08:38:47 +0200 Subject: [PATCH 1/2] Fix 10814: Make OcModal vertically scrollable --- packages/design-system/src/components/OcModal/OcModal.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue index c8cfaae15e9..2b2fca04ada 100644 --- a/packages/design-system/src/components/OcModal/OcModal.vue +++ b/packages/design-system/src/components/OcModal/OcModal.vue @@ -434,12 +434,14 @@ export default defineComponent({ } .oc-modal { - max-width: 500px; - width: 100%; box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3); border: 1px solid var(--oc-color-input-border); border-radius: 15px; background-color: var(--oc-color-background-default); + overflow-y: scroll; + max-height: 95vh !important; + max-width: 500px; + width: 100%; &:focus { outline: none; From 6f60e7402a6aec6d36299e908851c9751362416a Mon Sep 17 00:00:00 2001 From: Pascal Wengerter Date: Tue, 23 Apr 2024 16:34:44 +0200 Subject: [PATCH 2/2] Improve solution by only scrolling inside OcModal body, making overscroll-y automatic instead of enabled by default --- packages/design-system/src/components/OcModal/OcModal.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue index 2b2fca04ada..10ff1173f09 100644 --- a/packages/design-system/src/components/OcModal/OcModal.vue +++ b/packages/design-system/src/components/OcModal/OcModal.vue @@ -434,12 +434,10 @@ export default defineComponent({ } .oc-modal { - box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3); + background-color: var(--oc-color-background-default); border: 1px solid var(--oc-color-input-border); border-radius: 15px; - background-color: var(--oc-color-background-default); - overflow-y: scroll; - max-height: 95vh !important; + box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3); max-width: 500px; width: 100%; @@ -501,6 +499,8 @@ export default defineComponent({ &-body { color: var(--oc-color-text-default); line-height: 1.625; + max-height: calc(80vh - 2rem) !important; + overflow-y: auto; padding: var(--oc-space-medium) var(--oc-space-medium) 0; span { color: var(--oc-color-text-default);