UX: improve layout of keyboard shortcut modal (#20220)

app/assets/javascripts/discourse/app/controllers/keyboard-shortcuts-help.js

@@ -201,35 +201,27 @@ export default Controller.extend(ModalFunctionality, {
           enter: buildShortcut("bookmarks.enter", { keys1: [ENTER] }),
           later_today: buildShortcut("bookmarks.later_today", {
             keys1: ["l", "t"],
-            shortcutsDelimiter: "space",
           }),
           later_this_week: buildShortcut("bookmarks.later_this_week", {
             keys1: ["l", "w"],
-            shortcutsDelimiter: "space",
           }),
           tomorrow: buildShortcut("bookmarks.tomorrow", {
             keys1: ["n", "d"],
-            shortcutsDelimiter: "space",
           }),
           next_business_week: buildShortcut("bookmarks.next_business_week", {
             keys1: ["n", "b", "w"],
-            shortcutsDelimiter: "space",
           }),
           next_business_day: buildShortcut("bookmarks.next_business_day", {
             keys1: ["n", "b", "d"],
-            shortcutsDelimiter: "space",
           }),
           custom: buildShortcut("bookmarks.custom", {
             keys1: ["c", "r"],
-            shortcutsDelimiter: "space",
           }),
           none: buildShortcut("bookmarks.none", {
             keys1: ["n", "r"],
-            shortcutsDelimiter: "space",
           }),
           delete: buildShortcut("bookmarks.delete", {
             keys1: ["d", "d"],
-            shortcutsDelimiter: "space",
           }),
         },
       },

app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs

@@ -1,15 +1,17 @@
 <DModalBody @id="keyboard-shortcuts-help">
-  {{#each-in this.shortcuts as |category shortcutCategory|}}
-    <section
-      class="shortcut-category span-{{shortcutCategory.count}}
-        shortcut-category-{{category}}"
-    >
-      <h4>{{i18n (concat "keyboard_shortcuts_help." category ".title")}}</h4>
-      <ul>
-        {{#each-in shortcutCategory.shortcuts as |name shortcut|}}
-          <li>{{html-safe shortcut}}</li>
-        {{/each-in}}
-      </ul>
-    </section>
-  {{/each-in}}
+  <div class="keyboard-shortcuts-help__container">
+    {{#each-in this.shortcuts as |category shortcutCategory|}}
+      <section
+        class="shortcut-category span-{{shortcutCategory.count}}
+          shortcut-category-{{category}}"
+      >
+        <h4>{{i18n (concat "keyboard_shortcuts_help." category ".title")}}</h4>
+        <ul>
+          {{#each-in shortcutCategory.shortcuts as |name shortcut|}}
+            <li>{{html-safe shortcut}}</li>
+          {{/each-in}}
+        </ul>
+      </section>
+    {{/each-in}}
+  </div>
 </DModalBody>

app/assets/stylesheets/common/components/keyboard_shortcuts.scss

@@ -27,22 +27,38 @@
   background-color: inherit;
 }
 
-.keyboard-shortcuts-modal .modal-body {
-  max-height: 560px;
-}
-
-.keyboard-shortcuts-modal .modal-inner-container {
-  max-width: 880px;
+.keyboard-shortcuts-modal {
+  .modal-inner-container {
+    --modal-max-width: 80vw;
+  }
 }
 
 #keyboard-shortcuts-help {
-  display: grid;
-  grid-gap: 0.5em 1.25em;
-  grid-template-columns: repeat(3, 1fr);
+  box-sizing: border-box;
+  padding: 1em;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 80vw;
+  max-width: 1500px;
+  max-height: 85vh !important; // overrides a default modal !important for extra space
+
+  .keyboard-shortcuts-help__container {
+    columns: auto 20em;
+    section {
+      display: inline-block;
+      margin-bottom: 1.5em;
+      width: 100%;
+    }
+  }
+
   &:focus {
     outline: none;
   }
 
+  kbd:first-child {
+    margin-left: 0;
+  }
+
   @for $i from 1 through 25 {
     .span-#{$i} {
       grid-row-end: span $i;
@@ -51,8 +67,7 @@
 
   ul {
     list-style: none;
-    margin-bottom: 2rem;
-    margin-left: 0;
+    margin: 0;
 
     li {
       align-items: center;
@@ -62,7 +77,6 @@
     }
 
     span {
-      background: var(--primary-very-low);
       border-radius: 3px;
       display: inline-flex;
       margin: 0 6px;