diff --git a/css/app.css b/css/app.css index 0285cf9dc3..2f0688b28b 100644 --- a/css/app.css +++ b/css/app.css @@ -2832,6 +2832,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; } @@ -2840,19 +2846,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; diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 1c40208a50..e7bbbdc410 100644 --- a/modules/ui/shortcuts.js +++ b/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'; }); }