fix(modal): change width value on breakpoint

ovh · Feb 15, 2024 · 3e7aeba · 3e7aeba
1 parent 9de6610
commit 3e7aeba
Showing 1 changed file with 39 additions and 35 deletions.
diff --git a/packages/components/src/modal/src/components/osds-modal/styles/osds-modal.size.scss b/packages/components/src/modal/src/components/osds-modal/styles/osds-modal.size.scss
@@ -3,46 +3,50 @@
 
 // Main CSS mixin for sizes
 @mixin osds-modal-theme-size() {
-    :host {
+  :host {
+    width: 100%;
+    height: 100%;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .backdrop {
+      width: 100%;
+      height: 100%;
+    }
+
+    .wrapper {
+      border-radius: var(--ods-size-04);
+      padding: 0;
+      width: 512px;
+      min-width: 50%;
+      max-width: 512px;
+
+      .header {
+        padding: 0 calc(var(--ods-size-04) / 2);
         width: 100%;
-        height: 100%;
+        height: calc(var(--ods-size-09) + var(--ods-size-05));
+      }
 
-        * {
-            box-sizing: border-box;
-        }
+      .content {
+        padding: var(--ods-size-06) var(--ods-size-08) var(--ods-size-08);
+        width: 100%;
 
-        .backdrop {
-            width: 100%;
-            height: 100%;
+        .headline {
+          margin-bottom: var(--ods-size-04);
         }
 
-        .wrapper {
-            border-radius: var(--ods-size-04);
-            padding: 0;
-            width: 70%;
-            min-width: 50%;
-            max-width: clamp(36rem, 70%, 70%);
-
-            .header {
-                padding: 0 calc(var(--ods-size-04) / 2);
-                width: 100%;
-                height: calc(var(--ods-size-09) + var(--ods-size-05));
-            }
-
-            .content {
-                padding: var(--ods-size-06) var(--ods-size-08) var(--ods-size-08);
-                width: 100%;
-
-                .headline {
-                    margin-bottom: var(--ods-size-04);
-                }
-
-                .actions {
-                    gap: var(--ods-size-04);
-                    margin-top: var(--ods-size-07);
-                    width: 100%;
-                }
-            }
+        .actions {
+          gap: var(--ods-size-04);
+          margin-top: var(--ods-size-07);
+          width: 100%;
         }
+      }
+
+      @media (width < 786px) {
+        width: 100%
+      }
     }
+  }
 }