ui minor fixes for shortcut.js

css/80_app.css

@@ -3109,6 +3109,12 @@ img.tile-removing {
     border-radius: 4px;
 }
 
+.modal-shortcuts .shortcut-tab {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
 .modal-shortcuts .tab:hover {
     background-color: #ccc;
 }
@@ -3117,19 +3123,25 @@ img.tile-removing {
     color: #7092FF;
 }
 
+.modal-shortcuts .shortcut-row {
+    display: flex;
+    flex-direction: row;
+}
+
 .modal-shortcuts .kbd-row {
-    display: inline-block;
     padding-right: 10px;
     color: #767676;
     text-align: right;
     white-space: nowrap;
-    padding-bottom: 3px;
+    padding-bottom: 5px;
+    width: 50%;
     
 } 
 .modal-shortcuts .shortcut-desc {
-    display: inline-block;
-    padding-bottom: 3px;
+    padding-bottom: 5px;
+    width: 50%;
 }
+
 .modal-shortcuts kbd {
     display: inline-block;
     text-align: right;    

modules/ui/shortcuts.js

@@ -102,18 +102,18 @@ export function uiShortcuts() {
 
             var shortcutsRow = row
                 .append('div')
-                .attr('class', 'kbd-row col6');
+                .attr('class', 'kbd-row');
 
             shortcutsRow
                 .selectAll('kbd')
                 .data(function (d) { return d.shortcut; })
                 .enter()
                 .append('kbd')
-                .text(function (d) { return d; });
+                .text(function (d) { return uiCmd(d); });
 
             row
                 .append('div')
-                .attr('class', 'shortcut-desc ')
+                .attr('class', 'shortcut-desc')
                 .text(function (d) { return t(d.key); });
 
             shortcuts = shortcuts
@@ -122,7 +122,7 @@ export function uiShortcuts() {
             // Update
             wrapper.selectAll('.shortcut-tab')
                 .style('display', function (d, i) {
-                    return i === activeTab ? 'block' : 'none';
+                    return i === activeTab ? 'flex' : 'none';
                 });
         }