From beee9623ecddcb90551c29ec5f55411396d928ad Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 8 Feb 2023 16:39:32 -0500
Subject: [PATCH] UX: improve layout of keyboard shortcut modal (#20220)

---
 .../controllers/keyboard-shortcuts-help.js    |  8 ----
 .../modal/keyboard-shortcuts-help.hbs         | 28 +++++++-------
 .../common/components/keyboard_shortcuts.scss | 38 +++++++++++++------
 3 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/keyboard-shortcuts-help.js b/app/assets/javascripts/discourse/app/controllers/keyboard-shortcuts-help.js
index 359ab09d013..84526f584ef 100644
--- a/app/assets/javascripts/discourse/app/controllers/keyboard-shortcuts-help.js
+++ b/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",
           }),
         },
       },
diff --git a/app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs b/app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs
index 90de7b13736..1d3b2929d70 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs
+++ b/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>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index 56925f449c9..d824226f5f5 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/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;