From 27cb6199b5e403e1901f91075e67cbcd147c08cf Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 15 Jul 2019 16:07:39 -0400
Subject: [PATCH] use padding rather than margin to avoid margin collapse; drop
 overflow clear approach

---
 src/components/join-flow/join-flow-step.scss     |  4 +++-
 .../modal/base/modal-inner-content.jsx           | 16 +++++++---------
 .../modal/base/modal-inner-content.scss          |  9 ---------
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss
index f361dbe0c..51df1776a 100644
--- a/src/components/join-flow/join-flow-step.scss
+++ b/src/components/join-flow/join-flow-step.scss
@@ -9,6 +9,8 @@
 .join-flow-inner-content {
     box-shadow: none;
     width: calc(100% - 5.875rem);
-    margin: 2.3125rem auto 2.5rem;
+    /* must use padding for top, rather than margin, because margins will collapse */
+    margin: 0 auto;
+    padding: 2.3125rem 0 2.5rem;
     font-size: .875rem;
 }
diff --git a/src/components/modal/base/modal-inner-content.jsx b/src/components/modal/base/modal-inner-content.jsx
index 3ee063333..a0724649b 100644
--- a/src/components/modal/base/modal-inner-content.jsx
+++ b/src/components/modal/base/modal-inner-content.jsx
@@ -8,15 +8,13 @@ const ModalInnerContent = ({
     children,
     className
 }) => (
-    <div className="modal-inner-clear">
-        <div
-            className={classNames(
-                'modal-inner-content',
-                className
-            )}
-        >
-            {children}
-        </div>
+    <div
+        className={classNames(
+            'modal-inner-content',
+            className
+        )}
+    >
+        {children}
     </div>
 );
 
diff --git a/src/components/modal/base/modal-inner-content.scss b/src/components/modal/base/modal-inner-content.scss
index 98a6a382e..a144de3fd 100644
--- a/src/components/modal/base/modal-inner-content.scss
+++ b/src/components/modal/base/modal-inner-content.scss
@@ -1,15 +1,6 @@
 @import "../../../colors";
 @import "../../../frameless";
 
-/*
-necessary to prevent modal-inner-content's margins from
-unexpectedly collapsing with a parent
-*/
-.modal-inner-clear {
-    overflow: auto;
-    height: 100%;
-}
-
 .modal-inner-content {
     box-sizing: border-box;
     display: flex;