Fix modal windows not having internal scroll on mobile (#152)

arthurxavierx · web-flow · commit bcdc733d064b · 2020-05-27T15:19:56.000-03:00
diff --git a/src/Lumi/Components/Modal.purs b/src/Lumi/Components/Modal.purs
@@ -456,8 +456,9 @@ styles = jss
 
                 -- non-dialog modals fill the screen on mobile devices
               , "&:not([data-variant=\"dialog\"])":
-                  { "& lumi-modal":
-                      { "@media (max-width: 860px)":
+                  { "@media (max-width: 860px)":
+                      { maxHeight: "100%"
+                      , "& lumi-modal":
                           { position: "fixed"
                           , top: "0"
                           , right: "0"
@@ -470,6 +471,10 @@ styles = jss
                           , "&[data-size=\"small\"], &[data-size=\"medium\"], &[data-size=\"large\"]":
                               { width: "100vw"
                               }
+                          , "& lumi-modal-content":
+                              { flex: "1 1 auto"
+                              , overflowY: "auto"
+                              }
                           }
                       }
                   }

Original file line number	Diff line number	Diff line change
`@@ -456,8 +456,9 @@ styles = jss`
`456`	`456`
`457`	`457`	`-- non-dialog modals fill the screen on mobile devices`
`458`	`458`	`, "&:not([data-variant=\"dialog\"])":`
`459`		`- { "& lumi-modal":`
`460`		`- { "@media (max-width: 860px)":`
	`459`	`+ { "@media (max-width: 860px)":`
	`460`	`+ { maxHeight: "100%"`
	`461`	`+ , "& lumi-modal":`
`461`	`462`	`{ position: "fixed"`
`462`	`463`	`, top: "0"`
`463`	`464`	`, right: "0"`
`@@ -470,6 +471,10 @@ styles = jss`
`470`	`471`	`, "&[data-size=\"small\"], &[data-size=\"medium\"], &[data-size=\"large\"]":`
`471`	`472`	`{ width: "100vw"`
`472`	`473`	`}`
	`474`	`+ , "& lumi-modal-content":`
	`475`	`+ { flex: "1 1 auto"`
	`476`	`+ , overflowY: "auto"`
	`477`	`+ }`
`473`	`478`	`}`
`474`	`479`	`}`
`475`	`480`	`}`