3 files changed, 30 insertions, 1 deletions
diff --git a/html/index.html b/html/index.html
index db60e7a..92fdc78 100644
--- a/html/index.html
+++ b/html/index.html
@@ -2,6 +2,7 @@
 <html>
 	<head>
 		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Webbox</title>
 		<link rel="stylesheet" type="text/css" href="webbox.css"/>
 		<script src="webbox.js"></script>
@@ -47,6 +48,7 @@
 				<tr><td class="entry" onclick="hideMenu(); move();">Move</td></tr>
 				<tr><td class="entry" onclick="hideMenu(); info();">Info</td></tr>
 				<tr><td class="entry" onclick="hideMenu(); selectAll();">Select/Unselect All</td></tr>
+				<tr><td class="entry" onclick="hideMenu();">Close Menu</td></tr>
 			</table>
 		</div>
 
diff --git a/html/webbox.css b/html/webbox.css
index 46f46ec..19d303e 100644
--- a/html/webbox.css
+++ b/html/webbox.css
@@ -53,6 +53,7 @@ div, td, h1 {
 	border-style: solid;
 	border-color: #808080;
 	padding: 10pt;
+	box-sizing: border-box;
 }
 
 .menusymbol {
@@ -74,6 +75,7 @@ div, td, h1 {
 	border-style: solid;
 	border-color: #808080;
 	padding: 10pt;
+	box-sizing: border-box;
 }
 
 table.menudialog {
@@ -82,7 +84,6 @@ table.menudialog {
 
 table.menudialog td.entry {
 	cursor: pointer;
-	width: 100%;
 	border-width: 0;
 	border-bottom-width: 1px;
 	border-style: solid;
@@ -169,3 +170,23 @@ table.list td.name {
 	border: 0; /* 1px solid #000000; */
 	color: #0000FF;
 }
+
+@media only screen and (min-width: 1px) and (max-width: 630px) {
+	.menuwindow {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+	}
+
+	.dialogwindow {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+	}
+}
diff --git a/html/webbox.js b/html/webbox.js
index dd57966..8612062 100644
--- a/html/webbox.js
+++ b/html/webbox.js
@@ -240,6 +240,12 @@ function initMainpage() {
 	// default action for "Cancel" button: hide dialog window
 	document.getElementById("cancelbutton").onclick = hideDialog;
 
+	// on click outside of menu, close menu
+	document.getElementById("greyout").onclick = function() {
+		hideDialog();
+		hideMenu();
+	}
+	
 	// on Escape, globally hide dialog and menu window
 	document.onkeydown = function(evt) {
 		if (evt.key == "Escape") {