From fe3638548d8ea64df62a781125ce1fd33cb3f411 Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Sun, 22 Feb 2026 08:26:54 +0200
Subject: [PATCH] fix(ui): use correct modals-modal component for Shortcuts
 modal

---
 client/components/modals/ShortcutsModal.vue | 37 ++++++++++++---------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/client/components/modals/ShortcutsModal.vue b/client/components/modals/ShortcutsModal.vue
index 60bf7ecf7..9090f5b7a 100644
--- a/client/components/modals/ShortcutsModal.vue
+++ b/client/components/modals/ShortcutsModal.vue
@@ -1,24 +1,31 @@
 <template>
-  <ui-modal v-model="show" :width="600" title="Keyboard Shortcuts" @close="close">
-    <div class="p-6 text-sm text-gray-200">
-      <div v-for="(section, index) in shortcutSections" :key="index" class="mb-6 last:mb-0">
-        <h3 class="text-lg font-semibold text-white mb-3">{{ section.title }}</h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-4">
-          <div v-for="shortcut in section.shortcuts" :key="shortcut.keys" class="flex justify-between items-center py-1 border-b border-white/10 last:border-b-0">
-            <span>{{ shortcut.action }}</span>
-            <div class="flex gap-1">
-              <span v-for="(key, i) in shortcut.keys.replace(/Key/g, '').split('-')" :key="i" class="px-2 py-0.5 bg-bg font-mono text-xs rounded-sm border border-gray-600 text-gray-300">
-                {{ key }}
-              </span>
+  <modals-modal v-model="show" name="shortcuts" :width="600">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="text-3xl text-white truncate">Keyboard Shortcuts</p>
+      </div>
+    </template>
+    <div class="px-6 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div class="text-sm text-gray-200">
+        <div v-for="(section, index) in shortcutSections" :key="index" class="mb-6 last:mb-0">
+          <h3 class="text-lg font-semibold text-white mb-3">{{ section.title }}</h3>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-4">
+            <div v-for="shortcut in section.shortcuts" :key="shortcut.keys" class="flex justify-between items-center py-1 border-b border-white/10 last:border-b-0">
+              <span>{{ shortcut.action }}</span>
+              <div class="flex gap-1">
+                <span v-for="(key, i) in shortcut.keys.replace(/Key/g, '').split('-')" :key="i" class="px-2 py-0.5 bg-bg font-mono text-xs rounded-sm border border-gray-600 text-gray-300">
+                  {{ key }}
+                </span>
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div class="flex justify-end pt-4 border-t border-white/10 mt-4">
+        <ui-btn @click="close">Close</ui-btn>
+      </div>
     </div>
-    <div class="flex justify-end p-4 border-t border-white/10">
-      <ui-btn @click="close">Close</ui-btn>
-    </div>
-  </ui-modal>
+  </modals-modal>
 </template>
 
 <script>