Fixes Safari dialog resize bug; closes #171

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.0.0-beta.14
+
+- Fixed bug where scrolling dialogs didn't resize properly in Safari
+
 ## 2.0.0-beta.13
 
 - Added `slActivate` and `slDeactivate` events to `sl-menu-item`

src/components/dialog/dialog.scss

@@ -30,8 +30,8 @@
   flex-direction: column;
   z-index: 2;
   width: var(--width);
-  max-width: calc(100vw - var(--sl-spacing-xx-large));
-  max-height: calc(100vh - var(--sl-spacing-xx-large));
+  max-width: calc(100% - var(--sl-spacing-xx-large));
+  max-height: calc(100% - var(--sl-spacing-xx-large));
   background-color: var(--sl-color-white);
   border-radius: var(--sl-border-radius-medium);
   box-shadow: var(--sl-shadow-x-large);
@@ -47,7 +47,7 @@
 // Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)
 @media screen and (max-width: 420px) {
   .dialog__panel {
-    max-height: calc(80vh);
+    max-height: 80vh;
   }
 }
 
@@ -58,6 +58,7 @@
 }
 
 .dialog__header {
+  flex: 0 0 auto;
   display: flex;
 }
 
@@ -77,12 +78,14 @@
 }
 
 .dialog__body {
+  flex: 1 1 auto;
   padding: var(--sl-spacing-large);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 .dialog__footer {
+  flex: 0 0 auto;
   text-align: right;
   padding: var(--sl-spacing-large);