Fix mobile dialog styling (excalidraw#1363)

stvnshpd · Apr 10, 2020 · 16a3aa7 · 16a3aa7
1 parent f134211
commit 16a3aa7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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>