Hide some words in top-level menu items on small viewports

In their normal state, most of the top-level menu items are a verb and
an object, like "Undo move".  This is admirably clear, but on a small
screen the menu can take a lot of space.  In each case the verb alone
is sufficient to know what the button does, so use a media query to
suppress the noun is the viewport is very narrow.  "Very narrow" here
is roughly where the menus would overflow onto four lines in my
browser.

1 files changed, 13 insertions, 5 deletions

diff --git a/html/jspage.pl b/html/jspage.pl
index 99ec85d..574f255 100755
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -129,6 +129,14 @@ EOF
     background: inherit;
 }
 
+\@media (max-width:18em) {
+    /* Suppress some words in top-level menu items when viewport
+     * is very small */
+    .verbiage {
+        display: none;
+    }
+}
+
 #gamemenu ul ul {
     /* Second-level menus and below are not displayed by default */
     display: none;
@@ -211,11 +219,11 @@ ${unfinishedpara}
 ></ul></li
 ><li>Type...<ul id="gametype"></ul></li
 ><li class="separator"></li
-><li id="new" class="afterseparator">New game</li
-><li id="restart">Restart game</li
-><li id="undo">Undo move</li
-><li id="redo">Redo move</li
-><li id="solve">Solve game</li
+><li id="new" class="afterseparator">New<span class="verbiage"> game</span></li
+><li id="restart">Restart<span class="verbiage"> game</span></li
+><li id="undo">Undo<span class="verbiage"> move</span></li
+><li id="redo">Redo<span class="verbiage"> move</span></li
+><li id="solve">Solve<span class="verbiage"> game</span></li
 ></ul></div>
 <div align=center>
   <div id="resizable" style="position:relative; left:0; top:0">