From f96df3292a90ee505f3d662830d15a80ce2cd2e5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 16 Jun 2026 17:16:59 +0200
Subject: [PATCH 1/6] fix(test): keymap not rendering correctly if row5 has two
 keys (@fehmer)

---
 frontend/src/ts/elements/keymap.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index b469b344bb86..a6eb7b9311a1 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -204,7 +204,7 @@ function buildRow(options: {
 
   if (isMatrix) {
     if (rowId !== "row5" && layoutData.matrixShowRightColumn) {
-      keysHtml += `<div class="keymapKey"></div>`;
+      keysHtml += `<div class="keymapKey data-key=" "></div>`;
     } else {
       keysHtml += `<div></div>`;
     }
@@ -272,14 +272,16 @@ function buildRow(options: {
         r5Grid += "-";
       }
       if (isRowEmpty(keyVisualValue)) {
-        keysHtml += `<div class="keymapKey keySpace layoutIndicator ${side}">
+        keysHtml += `<div class="keymapKey keySpace layoutIndicator ${side}" data-key=" ">
               <div class="letter" ${letterStyle}>${layoutDisplay}</div>
             </div>`;
         r5Grid += "3";
         // potential second space in next loop iterations will be empty:
         layoutDisplay = "";
       } else {
-        keysHtml += `<div class="keymapKey ${side}">
+        keysHtml += `<div class="keymapKey ${side}" data-key="${key
+          .map((it) => it.replace('"', "&quot;"))
+          .join(keyDataDelimiter)}">
               <div class="letter">${keyDisplay}</div>
             </div>`;
         r5Grid += "1";

From 3fa57e022822d08acaf825193343bdaa16dd5f30 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 16 Jun 2026 17:26:20 +0200
Subject: [PATCH 2/6] impr

---
 frontend/src/ts/elements/keymap.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index a6eb7b9311a1..5deda1a09a9c 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -279,9 +279,7 @@ function buildRow(options: {
         // potential second space in next loop iterations will be empty:
         layoutDisplay = "";
       } else {
-        keysHtml += `<div class="keymapKey ${side}" data-key="${key
-          .map((it) => it.replace('"', "&quot;"))
-          .join(keyDataDelimiter)}">
+        keysHtml += `<div class="keymapKey ${side}" data-key="${keyVisualValue.join(keyDataDelimiter)}">
               <div class="letter">${keyDisplay}</div>
             </div>`;
         r5Grid += "1";

From 77b9dbb118fc212a58ef78fa347f2559a8f47b88 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 16 Jun 2026 17:44:19 +0200
Subject: [PATCH 3/6] don't break on unknown keycode

---
 frontend/src/ts/elements/keymap.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 5deda1a09a9c..f181a9db66d4 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -586,7 +586,7 @@ async function updateLegends(): Promise<void> {
 
     const keycode = KeyConverter.layoutKeyToKeycode(lowerCaseCharacter, layout);
     if (keycode === undefined) {
-      return;
+      continue;
     }
     const oppositeShift = ShiftTracker.isUsingOppositeShift(keycode);
 

From 12964c8d2f82c60dda6eaa5ac3b748517e4e1482 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 17 Jun 2026 08:57:49 +0200
Subject: [PATCH 4/6] oops

---
 frontend/src/ts/elements/keymap.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index f181a9db66d4..e7cc1392faf1 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -204,7 +204,7 @@ function buildRow(options: {
 
   if (isMatrix) {
     if (rowId !== "row5" && layoutData.matrixShowRightColumn) {
-      keysHtml += `<div class="keymapKey data-key=" "></div>`;
+      keysHtml += `<div class="keymapKey" data-key=" "></div>`;
     } else {
       keysHtml += `<div></div>`;
     }

From c8ef5f8d0c92c6587ece9bd0d0c37a499069287e Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Wed, 17 Jun 2026 11:24:48 +0200
Subject: [PATCH 5/6] remove data-key from matrix with right column

---
 frontend/src/ts/elements/keymap.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index e7cc1392faf1..0888e2f910cb 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -204,7 +204,7 @@ function buildRow(options: {
 
   if (isMatrix) {
     if (rowId !== "row5" && layoutData.matrixShowRightColumn) {
-      keysHtml += `<div class="keymapKey" data-key=" "></div>`;
+      keysHtml += `<div class="keymapKey"></div>`;
     } else {
       keysHtml += `<div></div>`;
     }

From 1efd4d5c54375deb97cbfa376150476d735eebbe Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 17 Jun 2026 12:07:52 +0200
Subject: [PATCH 6/6] cleanup

---
 frontend/src/ts/elements/keymap.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 0888e2f910cb..4ffdae0bf6cb 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -272,7 +272,7 @@ function buildRow(options: {
         r5Grid += "-";
       }
       if (isRowEmpty(keyVisualValue)) {
-        keysHtml += `<div class="keymapKey keySpace layoutIndicator ${side}" data-key=" ">
+        keysHtml += `<div class="keymapKey keySpace layoutIndicator ${side}">
               <div class="letter" ${letterStyle}>${layoutDisplay}</div>
             </div>`;
         r5Grid += "3";