From 16a3aa7561cf5960b780fb9448c0d6d7afcb06f8 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Fri, 10 Apr 2020 11:13:31 -0400
Subject: [PATCH] Fix mobile dialog styling (#1363)

---
 src/components/Modal.scss |  6 +++++-
 src/components/Modal.tsx  | 12 +++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal.scss b/src/components/Modal.scss
index 4e2970e92..1879a9016 100644
--- a/src/components/Modal.scss
+++ b/src/components/Modal.scss
@@ -28,12 +28,16 @@
   position: relative;
   z-index: 2;
   width: 100%;
-  max-width: 100%;
+  max-width: var(--max-width);
 
   opacity: 0;
   transform: translateY(10px);
   animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
   position: relative;
+
+  @media #{$media-query} {
+    max-width: 100%;
+  }
 }
 
 @keyframes Modal__content_fade-in {
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 813be4c19..136a22c36 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -31,11 +31,13 @@ export function Modal(props: {
       <div className="Modal__background" onClick={props.onCloseRequest}></div>
       <div
         className="Modal__content"
-        style={{
-          maxWidth: props.maxWidth,
-          maxHeight: "100%",
-          overflowY: "scroll",
-        }}
+        style={
+          {
+            "--max-width": `${props.maxWidth}px`,
+            maxHeight: "100%",
+            overflowY: "scroll",
+          } as any
+        }
       >
         {props.children}
       </div>