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,4 +1,5 @@
 <DModalBody @id="keyboard-shortcuts-help">
+  <div class="keyboard-shortcuts-help__container">
     {{#each-in this.shortcuts as |category shortcutCategory|}}
       <section
         class="shortcut-category span-{{shortcutCategory.count}}
@@ -12,4 +13,5 @@
         </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 {
+    --modal-max-width: 80vw;
   }
-
-.keyboard-shortcuts-modal .modal-inner-container {
-  max-width: 880px;
 }
 
 #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;