From f16d2e351663103982b9457cae027eeaecd83ce1 Mon Sep 17 00:00:00 2001
From: Yanfei Guo <yanf.guo@gmail.com>
Date: Thu, 24 Oct 2024 00:07:12 -0500
Subject: [PATCH 1/2] Increase keymap/layer panel height

The keymap panel height was calculated using multiples of 3rem which
is too small for key height of 5rem. Increase to 6rem to fit the entire
keymap.
---
 src/pages/KeymapView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/KeymapView.vue b/src/pages/KeymapView.vue
index 61e22e8..79e8852 100644
--- a/src/pages/KeymapView.vue
+++ b/src/pages/KeymapView.vue
@@ -139,7 +139,7 @@
             <!--   Keymap   -->
             <q-tab-panels v-model="layerTab">
                 <q-tab-panel
-                    :style="{ height: `${Math.max(keymap?.size.y ?? 2, 2) * 3}rem` }"
+                    :style="{ height: `${Math.max(keymap?.size.y ?? 2, 2) * 6}rem` }"
                     v-for="(layer, layer_idx) in keymap?.keys"
                     :name="layer_idx"
                 >

From 8e3910e1868f4577d38e886195a8e05a60a32a8f Mon Sep 17 00:00:00 2001
From: Yanfei Guo <yanf.guo@gmail.com>
Date: Thu, 24 Oct 2024 00:09:58 -0500
Subject: [PATCH 2/2] adjust key size in keymap view for uniform keygaps

The key size need to be calculated using unit size (5rem) minus the
gap between keys.
---
 src/pages/KeymapView.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/KeymapView.vue b/src/pages/KeymapView.vue
index 79e8852..2231a66 100644
--- a/src/pages/KeymapView.vue
+++ b/src/pages/KeymapView.vue
@@ -50,8 +50,9 @@
         return {
             top: `${layout.y * 5}rem`,
             left: `${layout.x * 5}rem`,
-            width: `${layout.w! * 4.5}rem`,
-            height: `${layout.h! * 4.5}rem`,
+            width: `${layout.w! * 5 - 0.5}rem`,
+            height: `${layout.h! * 5 - 0.5}rem`,
+            margin: `0.25rem`,
         }
     }