Fix vertical scroll inside OcModal for small screens

owncloud · May 15, 2024 · 850b3da · 850b3da
1 parent 2b12f78
commit 850b3da
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/changelog/unreleased/bugfix-oc-modal-scroll-small-screens b/changelog/unreleased/bugfix-oc-modal-scroll-small-screens
@@ -0,0 +1,6 @@
+Bugfix: Vertical scroll for OcModal on small screens
+
+We've fixed an issue where modals were not scrollable on screens with small heights.
+
+https://github.com/owncloud/web/issues/10814
+https://github.com/owncloud/web/pull/10816
diff --git 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);
+  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);
+  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
+  max-height: 90vh;
+  max-width: 500px;
+  overflow: auto;
+  width: 100%;
 
   &:focus {
     outline: none;