Re-write help content, try a modal-like display

app/assets/stylesheets/terminals.css

@@ -47,14 +47,21 @@
   }
 
   .terminal__help {
+    background: var(--color-terminal-bg);
+    border-radius: 1em;
     display: none;
 
+    inline-size: auto;
+    inset: 50% auto auto 50%;
+    max-inline-size: 90vw;
+    
+    padding: calc(var(--block-space) * 1.5) var(--block-space-double);
+    position: fixed;
+    transform: translate(-50%, -50%);
+
     .terminal--showing-help &,
     .terminal--open .terminal__menu:empty ~ & {
-      border-block-end: 1px dashed;
       display: block;
-      margin-block-end: 0.5lh;
-      padding-block-end: 0.5lh;
     }
 
     h2 {
@@ -74,7 +81,7 @@
     dl {
       display: grid;
       grid-template-columns: min-content 1fr;
-      gap: 0.5em 1em;
+      gap: var(--inline-space);
       font-size: var(--text-small);
       margin: 0;
     }
@@ -87,6 +94,7 @@
 
     dd {
       grid-column: 2;
+      white-space: nowrap;
     }
   }
 

app/views/commands/_help.html.erb

@@ -1,36 +1,37 @@
-<section class="terminal__help" aria-labelledby="help-menu-title">
-  <h2 id="help-menu-title"><strong>Commands you can use in Fizzy:</strong></h2>
+<section class="terminal__help shadow" aria-labelledby="help-menu-title">
+  <h2 id="help-menu-title"><strong>Fizzy do > Help</strong></h2>
   <dl>
-    <h3>Navigation</h3>
-    <dt><code>@username</code></dt>
-    <dd>Go to to a someone's profile</dd>
-    <dt><code>[id]</code></dt>
-    <dd>Jump to a card by ID</dd>
+    <h3>Search</h3>
+    <dt>Type keywords to search cards and comments</dt>
+    <dd>"CSS bug"</dd>
 
-    <h3>Filtering</h3>
-    <dt><code>#tag</code></dt>
-    <dd>Just show cards taggged [tag]</dd>
-    <dt><code>[id] [id]…</code></dt>
-    <dd>Show multiple cards by ID</dd>
-    <dt><code>[/search term]</code></dt>
-    <dd>Keyword search</dd>
-    <dt><code>/clear</code></dt>
-    <dd>Clear all filters</dd>
+    <h3>Navigate</h3>
+    <dt>Type a card ID to go to it</dt>
+    <dd>"137"</dd>
+    <dt>Type a name to see someone’s profile</dt>
+    <dd>"@jason"</dd>
 
-    <h3>Cards</h3>
-    <dt><code>/add [title]</code></dt>
-    <dd>Create a new card</dd>
-    <dt><code>/assign [person] [person]…</code></dt>
-    <dd>Assign visible card(s)</dd>
-    <dt><code>/close [reason]</code></dt>
-    <dd>Close visible card(s)</dd>
-    <dt><code>/tag [tag]</code></dt>
-    <dd>Tag visible card(s)</dd>
-    <dt><code>/do</code></dt>
-    <dd>Move card(s) to doing</dd>
-    <dt><code>/reconsider</code></dt>
-    <dd>Move card(s) back to considering</dd>
-    <dt><code>/stage [workflow stage name]</code></dt>
-    <dd>Assign card(s) to a workflow stage</dd>
+    <h3>Filter</h3>
+    <dt>Type card IDs to isolate them</dt>
+    <dd>"131, 137, 39"</dd>
+    <dt>Type a tag to see just tagged cards</dt>
+    <dd>"#design"</dd>
+
+    <h3>Commands</h3>
+    <dt>Type / to issue commands</dt>
+    <dd>"/move to Doing"</dd>
+
+    <dt>Type @ to match people</dt>
+    <dd>"/assign to @jason"</dd>
+
+    <dt>Type # to match tags</dt>
+    <dd>"/tag this #design"</dd>
+
+    <h3>Tips</h3>
+    <dt>Combine for powerful actions</dt>
+    <dd>"/move to Doing and /assign to @jason"</dd>
+
+    <dt>Or use natural language</dt>
+    <dd>"Show cards added by Jason this month"</dd>
   </dl>
 </section>