Browse Source

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

Fixes #2537
Michael Bromley 2 years ago
parent
commit
5176017819

+ 1 - 1
packages/admin-ui/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;
 }
 

+ 23 - 0
packages/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 {