diff --git a/web/src/styles.css b/web/src/styles.css
index 9d87bb3..258c2cd 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -6312,31 +6312,52 @@ footer .debug {
   border-radius: 3px;
 }
 
-/* The reference reads down the keys, so they line up and the example sits at
-   the end of the line rather than in the middle of the sentence. */
-.hangar-help-filters li {
-  display: flex;
-  flex-wrap: wrap;
+/* Three columns rather than three boxes on a line: the keys line up and the
+   examples end together, while each chip stays the width of its own text.
+   Stretching every key to the width of "mass, tons, tonnage" made a column of
+   mostly empty boxes. */
+.hangar-help-filters {
+  display: grid;
+  grid-template-columns: max-content 1fr max-content;
   align-items: baseline;
-  gap: 0.35rem;
+  gap: 0.35rem 0.6rem;
 }
 
-.hangar-help-filters .hangar-key {
-  flex: 0 0 auto;
-  min-width: 9rem;
-  color: var(--ink);
+.hangar-help-filters li {
+  display: contents;
 }
 
-.hangar-help-filters .hint {
-  flex: 1 1 12rem;
+.hangar-help-filters .hangar-key {
+  justify-self: start;
+  color: var(--ink);
 }
 
 .hangar-help-filters .hangar-key-eg {
-  flex: 0 0 auto;
-  margin-left: auto;
+  justify-self: end;
   color: var(--muted);
 }
 
+/* Narrow enough that three columns would wrap inside themselves: stack the
+   row instead. */
+@media (width <= 34rem) {
+  .hangar-help-filters {
+    grid-template-columns: 1fr;
+    gap: 0.15rem;
+  }
+
+  .hangar-help-filters li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.35rem;
+    margin-bottom: 0.35rem;
+  }
+
+  .hangar-help-filters .hangar-key-eg {
+    margin-left: auto;
+  }
+}
+
 .hangar-help-keys code {
   display: block;
   padding: 0.4rem 0.5rem;