Make buttons, inputs, & selects larger on small screens where...

...fine pointing device isn't detected (touch screens)

#417

src/js/css/res.css

@@ -0,0 +1,25 @@
+
+/* small screens without fine pointing device (touch) */
+@media screen and (max-width: 1080px) and ((pointer: none) or (pointer: coarse)) {
+	button {
+		min-height: 2em;
+		min-width: 2em;
+	}
+
+	.actionbutton + .actionbutton {
+		margin-top: 4px;
+	}
+
+	input[type=text], input[type=number] {
+		min-height: 1.5em;
+	}
+
+	input[type=checkbox] {
+		min-height: 1.2em;
+		min-width: 1.2em;
+	}
+
+	select {
+		min-height: 2.2em;
+	}
+}

src/js/stendhal.html

@@ -17,6 +17,7 @@
 	<title>Stendhal</title>
 	<link rel="stylesheet" type="text/css" href="css/main.css">
 	<link rel="stylesheet" type="text/css" href="css/font.css">
+	<link rel="stylesheet" type="text/css" href="css/res.css">
 	<meta name="viewport" content="interactive-widget=resizes-content">
 </head>
 

src/js/stendhal/ui/dialog/ActionContextMenu.ts

@@ -1,5 +1,5 @@
 /***************************************************************************
- *                (C) Copyright 2015-2023 - Faiumoni e. V.                 *
+ *                (C) Copyright 2015-2024 - Faiumoni e. V.                 *
  ***************************************************************************
  *                                                                         *
  *   This program is free software; you can redistribute it and/or modify  *
@@ -28,9 +28,9 @@ export class ActionContextMenu extends Component {
 		this.appendActions = append;
 		this.gatherActions();
 
-		var content = "<div class=\"actionmenu\">";
+		var content = "<div class=\"actionmenu verticalgroup\">";
 		for (var i = 0; i < this.actions.length; i++) {
-			content += "<button id=\"actionbutton." + i + "\">" + stendhal.ui.html.esc(this.actions[i].title) + "</button><br>";
+			content += "<button class=\"actionbutton" + (i > 0 ? " sub-actionbutton" : "") + "\" id=\"actionbutton." + i + "\">" + stendhal.ui.html.esc(this.actions[i].title) + "</button>";
 		}
 		content += "</div>";
 		this.componentElement.innerHTML = content;