From 2f9290fafeedf5b33b80f7278de8072c164f683b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 13 Aug 2020 07:24:18 -0400
Subject: [PATCH] Fixes Safari dialog resize bug; closes #171

---
 CHANGELOG.md                      | 4 ++++
 src/components/dialog/dialog.scss | 9 ++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 403480777..87c093a8c 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 14d521984..1894648e3 100644
--- a/src/components/dialog/dialog.scss
+++ b/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);