fix(admin-ui): Fix responsive layout of modal dialog for assets

Fixes #2537
vendure-ecommerce · Nov 23, 2023 · 5176017 · 5176017
1 parent f7b4f46
commit 5176017
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/...src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.scss b/...src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.scss
@@ -2,7 +2,7 @@
 :host {
     display: flex;
     flex-direction: column;
-    height: 70vh;
+    //height: 70vh;
     overflow-y: auto;
 }
 

diff --git a/...ages/admin-ui/src/lib/core/src/shared/components/modal-dialog/modal-dialog.component.scss b/...ages/admin-ui/src/lib/core/src/shared/components/modal-dialog/modal-dialog.component.scss
@@ -5,6 +5,29 @@
     &.modal-valign-bottom .modal {
         justify-content: flex-end;
     }
+    .modal-dialog {
+        display: flex;
+    }
+    .modal-content-wrapper {
+        flex: 1;
+        display: flex;
+    }
+    .modal-dialog .modal-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    @media screen and (max-height: 700px) {
+        .modal-dialog .modal-content {
+            padding: 0.8rem;
+        }
+        .modal-header, .modal-header--accessible {
+            padding-bottom: 0.8rem;
+        }
+        .modal-footer {
+            padding-top: 0.8rem;
+        }
+    }
 }
 
 .modal-body {