fix: keyboard unbinding and IR fixes

src/components/KeyboardKey.vue

@@ -4,6 +4,9 @@ import InputText from 'primevue/inputtext';
 import { fromKeycode, toKeycode } from '../keyboard';
 import { usePrfStore } from '../stores';
 import { OngekiButtons } from '../types';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const prf = usePrfStore();
 
@@ -61,6 +64,10 @@ const handleKey = (
             }
         }
 
+        if (event.code === 'Escape') {
+            keycode = 0;
+        }
+
         if (index !== undefined) {
             data[button][index] = keycode;
         } else {
@@ -160,13 +167,24 @@ const fontSize = computed(() => {
     <InputText
         :style="{
             width: small ? '2.8rem' : '5rem',
-            height: small ? '2.8rem' : tall ? '10rem' : '5rem',
+            height:
+                small && tall
+                    ? '5rem'
+                    : small
+                      ? '2.8rem'
+                      : tall
+                        ? '10rem'
+                        : '5rem',
             fontSize,
             backgroundColor: color,
         }"
         unstyled
         class="text-center buttoninputtext"
-        v-tooltip="tooltip ? `${tooltip}: ${modelValue}` : undefined"
+        v-tooltip="
+            tooltip
+                ? `${tooltip}: ${modelValue} ${tooltip.startsWith('ir') ? `\n${t('cfg.keyboard.irTooltip')}` : ''}`
+                : undefined
+        "
         @contextmenu.prevent="() => {}"
         @keydown="(ev: KeyboardEvent) => handleKey(button, ev, index)"
         @mousedown="

src/components/options/Keyboard.vue

@@ -95,7 +95,7 @@ const prf = usePrfStore();
                 </div>
             </div>
             <div v-if="prf.current?.meta.game === 'chunithm'">
-                <div class="absolute left-1/2 top-1/5">
+                <div class="absolute left-9/17 top-1/12">
                     <div
                         class="flex flex-row flex-nowrap gap-2 self-center w-full"
                     >
@@ -108,6 +108,7 @@ const prf = usePrfStore();
                                 button="ir"
                                 :index="idx - 1"
                                 :tooltip="`ir${idx}`"
+                                tall
                                 small
                                 color="rgba(0, 255, 0, 0.2)"
                             />