style: Adjusted modals to not differentiate between screen sizes if o…

…ff screen is set true (#970)
mittwald · Nov 12, 2024 · f0bb788 · f0bb788
1 parent 9d4cfee
commit f0bb788
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 36 deletions.
diff --git a/packages/components/src/components/Modal/Modal.module.scss b/packages/components/src/components/Modal/Modal.module.scss
@@ -83,7 +83,7 @@
   }
 }
 
-/* Modal */
+/* Normal Modal Desktop */
 
 @media (min-width: 550px) {
   .modal {
@@ -100,58 +100,54 @@
   }
 }
 
-/* OffCanvas */
+/* OffCanvas Mobile & Desktop */
 
 .offCanvas {
   justify-content: flex-end;
-}
 
-@media (min-width: 550px) {
-  .offCanvas {
-    > div {
-      border-bottom-left-radius: var(--modal--corner-radius);
-      border-top-left-radius: var(--modal--corner-radius);
-      height: 100%;
-      margin-left: auto;
+  > div {
+    border-bottom-left-radius: var(--modal--corner-radius);
+    border-top-left-radius: var(--modal--corner-radius);
+    height: 100%;
+    margin-left: auto;
+    max-width: var(--modal--off-canvas-max-width);
 
-      &[data-entering] {
-        animation: modal-slide-in-from-right var(--transition--duration--slow);
-      }
+    &[data-entering] {
+      animation: modal-slide-in-from-right var(--transition--duration--slow);
     }
+  }
 
-    &.left {
-      > div {
-        margin-left: unset;
-        margin-right: auto;
+  &.left {
+    > div {
+      margin-left: unset;
+      margin-right: auto;
 
-        &[data-entering] {
-          animation: modal-slide-in-from-left var(--transition--duration--slow);
-        }
+      &[data-entering] {
+        animation: modal-slide-in-from-left var(--transition--duration--slow);
       }
     }
+  }
 
-    .header {
-      border-bottom-width: var(--separator--height);
-      border-bottom-style: var(--border-style--default);
-      border-bottom-color: var(--separator--color);
-      padding-block: var(--modal--off-canvas-padding-y);
-      background-color: var(--modal--off-canvas-header-background-color);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
+  .header {
+    border-bottom-width: var(--separator--height);
+    border-bottom-style: var(--border-style--default);
+    border-bottom-color: var(--separator--color);
+    padding-block: var(--modal--off-canvas-padding-y);
+    background-color: var(--modal--off-canvas-header-background-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-    .content {
-      padding-top: var(--modal--padding);
-    }
+  .content {
+    padding-top: var(--modal--padding);
   }
 }
 
-/* Tray */
+/* Mobile Tray */
 
 @media (max-width: 550px) {
-  .modal,
-  .offCanvas {
+  .modal {
     overflow-y: auto;
     padding-top: var(--size-px--xxl);
 

diff --git a/packages/design-tokens/src/overlays/modal.yml b/packages/design-tokens/src/overlays/modal.yml
@@ -26,3 +26,5 @@ modal:
     value: "{size-px.s}"
   off-canvas-header-background-color:
     value: "{neutral.color.200}"
+  off-canvas-max-width:
+    value: "calc(100vw - {size-px.m})"