improving size/space of classhelper controls on touch devices.

[rouilj]

The buttons are a little small and the rows aren't tall enough to make a 48px minimum size.

Add the following CSS to classhelper.css. (this also changes the sizes of buttons to make the primary
button larger than the secondary button and a min-width of 48px in any interface).

diff --git a/html/classhelper.css b/html/classhelper.css
index a3625658..61ea73f8 100644
--- a/html/classhelper.css
+++ b/html/classhelper.css
@@ -61,12 +61,22 @@ table tr:hover {
     background-color: #eee;
 }
 
-.popup-control button {
-    width: 7em;
+button {
+    min-width: 3em;
+}
+
+@media (pointer: coarse) {
+    /* make min width 48px (3em*16px/em) on touch screens */
+  button {
+    min-height: 3em;
+  }
+  table td { padding-block: 2em; }
 }
 
 .popup-apply {
+    background-color: #c1cee6;
     font-weight: bold;
+    width: 7em;
 }
 
 /* Pagination */
@@ -100,6 +110,11 @@ table tr:hover {
     font-weight: bold;
 }
 
+.search-button {
+    background-color: #c1cee6;
+    font-weight: bold;
+    width: 7em;
+}
 
 .reset-button {
     margin-left: 60px;

Note that this results in taller rows but the checkbox is stuck to the top of the row. It looks like the checkbox is missing the surrounding td. I'll open a new issue on that.