Hide shortcuts when using a touch screen

Author: rosslh

client/css/styles.scss

@@ -128,24 +128,36 @@ html.fractal-root {
   padding-top: 0;
   flex-direction: column;
 
-  .shortcut-hint {
-    text-decoration: underline;
-  }
+  #shortcuts {
+    .shortcut-hint {
+      text-decoration: underline;
+    }
 
-  .checkbox-wrapper {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-  }
+    .checkbox-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--space-4);
+    }
 
-  .shortcut-wrapper {
-    display: flex;
-    align-items: center;
-    gap: var(--space-8);
+    .shortcut-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--space-8);
 
-    #macShortcut {
+      #macShortcut {
+        display: none;
+      }
+    }
+  }
+
+  @media (pointer: coarse) {
+    #shortcuts {
       display: none;
     }
+
+    #shortcuts + details {
+      border-top: none;
+    }
   }
 
   .iteration-buttons {

client/html/index.html

@@ -104,7 +104,7 @@ <h1 class="nav-heading">
       </div>
     </div>
     <div id="inputsWrapper" class="overlay">
-      <details open class="mobile-hidden">
+      <details open class="mobile-hidden" id="shortcuts">
         <summary><span>Shortcuts</span></summary>
         <div class="details-content">
           <div class="shortcut-wrapper">