From dfa64ecdbdac86c69fa2a6baff3e8c96e16b60e8 Mon Sep 17 00:00:00 2001
From: Jack Gallant <jackgallant@users.noreply.github.com>
Date: Tue, 26 May 2026 00:00:31 -0700
Subject: [PATCH] WebGL viewer: fix help-menu shortcut display and panel
 position

The 'h' help menu had several long-standing display bugs:

- Shortcut keys were rendered with key.toUpperCase(), so a plain
  lowercase binding (e.g. key:'h', key:'r', key:'s', key:'l') was shown
  as an uppercase letter -- indistinguishable from the genuinely
  Shift-modified bindings (key:'R'/'S'/'L' with modKeys:['shiftKey'],
  which are different commands). The binding data already carries the
  correct case, so render the key verbatim instead of uppercasing it.
- The modifier label was lowercased ("shift"); capitalize it ("Shift").
- #helpmenu was pinned to the left edge (left:0%), so its lower half
  slid behind the lower-left legend. Center it horizontally and
  vertically (left/top:50% + translate(-50%,-50%)).
- #helpmenu set no font-family, so the panel fell back to the
  browser-default serif (Times in Firefox) while the rest of the UI is
  sans-serif. Give it an explicit sans-serif.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 cortex/webgl/resources/css/mriview.css | 5 +++--
 cortex/webgl/resources/js/mriview.js   | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/cortex/webgl/resources/css/mriview.css b/cortex/webgl/resources/css/mriview.css
index 47962cbb..7062ad89 100644
--- a/cortex/webgl/resources/css/mriview.css
+++ b/cortex/webgl/resources/css/mriview.css
@@ -131,8 +131,8 @@ a:visited { color:white; }
     position:absolute;
     z-index:8;
     top: 50%;
-    left: 0%;
-    transform: translate(0%, -50%);
+    left: 50%;
+    transform: translate(-50%, -50%);
     padding:15px;
     margin:20px;
     border-radius:10px;
@@ -140,6 +140,7 @@ a:visited { color:white; }
     max-width:400px;
     display:none;
     font-size:12pt;
+    font-family:Helvetica, Arial, sans-serif;
     color:white;
     transition:all .3s;
     transition-timing-function:ease;
diff --git a/cortex/webgl/resources/js/mriview.js b/cortex/webgl/resources/js/mriview.js
index a407b03c..ea18a0da 100644
--- a/cortex/webgl/resources/js/mriview.js
+++ b/cortex/webgl/resources/js/mriview.js
@@ -1242,16 +1242,16 @@ var mriview = (function(module) {
                             new_html += '<tr><td style="text-align: center;">'
                             if ('modKeys' in list[i][name]){
                                 let modKeys = list[i][name]['modKeys'];
-                                modKeys = modKeys.map((modKey) => modKey.substring(0, modKey.length - 3));
+                                modKeys = modKeys.map((modKey) => modKey.charAt(0).toUpperCase() + modKey.substring(1, modKey.length - 3));
                                 modKeys = modKeys.join(' + ');
                                 new_html += modKeys + ' + ';
                             }
-                            new_html += list[i][name]['key'].toUpperCase() + '</td><td>' + diplay_name + '</td></tr>'
+                            new_html += list[i][name]['key'] + '</td><td>' + diplay_name + '</td></tr>'
                         }
                         if ('wheel' in list[i][name]){
                             new_html += '<tr><td style="text-align: center;">'
                             var modKeys = list[i][name]['modKeys']
-                            modKeys = modKeys.map((modKey) => modKey.substring(0, modKey.length - 3))
+                            modKeys = modKeys.map((modKey) => modKey.charAt(0).toUpperCase() + modKey.substring(1, modKey.length - 3))
                             modKeys = modKeys.join(' + ')
                             new_html += modKeys + ' + wheel  </td><td>' + diplay_name + '</td></tr>'
                         }