Bug fixes to shortcut modal (#127)

* Update shortcut modal to a responsive design layout

* Fix display of ctrl keys in the shortcut dialog

* Allow shortcut dialog to be navigatible using keyboard

* Add default san-serif font for consistent font display

---------

Co-authored-by: Edward Jung <edwardjung@google.com>

Author: bmxedd

src/constants.ts

@@ -68,7 +68,7 @@ export enum LOGGING_MSG_TYPE {
  * Platform specific modifier key used in shortcuts.
  */
 export enum MODIFIER_KEY {
-  Window = 'Ctrl',
+  Windows = 'Ctrl',
   ChromeOS = 'Ctrl',
   macOS = '⌘ Command',
   Linux = 'Meta',

src/shortcut_dialog.ts

@@ -108,7 +108,7 @@ export class ShortcutDialog {
 
     let modalContents = `<div class="modal-container">
       <dialog class="shortcut-modal">
-        <div class="shortcut-container">
+        <div class="shortcut-container" tabindex="0">
           <div class="header">
             <button class="close-modal">
               <span class="material-symbols-outlined">close</span>
@@ -298,7 +298,7 @@ Blockly.Css.register(`
 .shortcut-container {
   font-size: 0.95em;
   overflow: auto;
-  padding-inline-end: .5em;
+  padding: 0.5em;
 }
 
 .shortcut-combo {
@@ -339,5 +339,4 @@ Blockly.Css.register(`
     width: 45%;
   }
 }
-
 `);

test/index.html

@@ -4,11 +4,14 @@
     <meta charset="utf-8" />
     <title>Blockly Plugin Test</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <style>
       body {
+        font-family: Roboto, sans-serif;
+        font-size: 15px;
         margin: 0;
         max-width: 100vw;
       }