Merge branch 'mle/keyboard-shortcut-menu-style' into 'master'

Use kbd styling for keyboard shortcut hints

See merge request gitlab-org/gitlab!73141

app/assets/stylesheets/framework/kbd.scss

@@ -12,4 +12,20 @@ kbd {
   border-image: none;
   border-radius: 3px;
   box-shadow: 0 -1px 0 var(--gray-200, $gray-200) inset;
+
+  &.flat {
+    color: $code-color;
+    background-color: $gray-100;
+    border-color: var(--gray-10, $gray-10) var(--gray-10, $gray-10) var(--gray-50, $gray-50);
+    box-shadow: none;
+    border-radius: $border-radius-default;
+    font-family: $monospace-font;
+    font-size: $gl-font-size-small;
+    line-height: 1;
+    white-space: pre-wrap;
+    // Safari
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: keep-all;
+  }
 }

app/views/layouts/header/_help_dropdown.html.haml

@@ -10,7 +10,7 @@
     %li
       %button.js-shortcuts-modal-trigger{ type: "button" }
         = _("Keyboard shortcuts")
-        %span.text-secondary.float-right{ "aria-hidden": "true" }= '?'.html_safe
+        %kbd.flat.float-right{ "aria-hidden": "true" }= '?'.html_safe
     %li.divider
   %li
     = link_to _("Submit feedback"), "https://about.gitlab.com/submit-feedback"