Modal Dialog Example: Make Full Screen on Small Devices (pull #373)

For issue #321, when displayed on screen under 640px, make the dialog full screen with no margins.

examples/dialog-modal/css/dialog.css

@@ -1,3 +1,7 @@
+html, body {
+	height: 100%;
+}
+
 body {
 	max-width: 100%;
 	padding: 0;
@@ -11,9 +15,10 @@ body:not(.toc-inline) {
 
 #base_window_layer {
 	box-sizing: border-box;
-	height: 100vh;
+	height: 100%;
 	width: 100%;
-	overflow-y: scroll;
+	/* Use overflow scroll and webkit-overflow-scrolling to add momentum scroll*/
+	overflow: scroll;
 	-webkit-overflow-scrolling: touch;
 	padding: 1.6em 0 2em;
 }
@@ -51,7 +56,7 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na
 	height: 100vh;
 	top: 0;
 	left: 0;
-	overflow-y: scroll;
+	overflow: scroll;
 	-webkit-overflow-scrolling: touch;
 	background: rgba(0, 0, 0, 0.3);
 }
@@ -65,17 +70,19 @@ div.default_dialog {
 	padding: 5px;
 	border: thin #000 solid;
 	background-color: #fff;
-	position: absolute;;
+	position: absolute;
 	top: 25%;
 	left: 25%;
 }
 
 @media screen and (max-width: 640px) {
 	div.default_dialog {
 		box-sizing: border-box;
-		top: 1%;
-		left: 2%;
-		width: 96%;
+		top: 0px;
+		left: 0px;
+		margin-bottom: 0px;
+		min-height: 100%;
+		width: 100%;
 	}
 }