From 7e2fc8b45509c59df77da13341a34a1bcd5097e4 Mon Sep 17 00:00:00 2001
From: nym21 <expat-epochs0i@icloud.com>
Date: Sat, 30 May 2026 15:43:59 +0200
Subject: [PATCH] heatmaps: part 5

---
 website/scripts/utils/dom.js  | 15 +++++++--------
 website/src/heatmap/style.css |  4 ++--
 website/styles/chart.css      |  2 +-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/website/scripts/utils/dom.js b/website/scripts/utils/dom.js
index 2ba978925..881deecf6 100644
--- a/website/scripts/utils/dom.js
+++ b/website/scripts/utils/dom.js
@@ -281,18 +281,16 @@ export function createSelect({
     return span;
   }
 
-  const field = window.document.createElement("div");
-  field.classList.add("field");
+  const field = window.document.createElement("label");
+  if (label) {
+    const span = window.document.createElement("span");
+    span.textContent = label;
+    field.append(span);
+  }
 
   const select = window.document.createElement("select");
   select.id = id ?? "";
   select.name = id ?? "";
-  if (label) {
-    const labelElement = window.document.createElement("label");
-    labelElement.htmlFor = select.id;
-    labelElement.textContent = label;
-    field.append(labelElement);
-  }
   field.append(select);
 
   /** @param {T} choice */
@@ -333,6 +331,7 @@ export function createSelect({
 
   field.addEventListener("click", (e) => {
     if (e.target !== select) {
+      e.preventDefault();
       select.showPicker();
     }
   });
diff --git a/website/src/heatmap/style.css b/website/src/heatmap/style.css
index fcd6514b6..757d591c8 100644
--- a/website/src/heatmap/style.css
+++ b/website/src/heatmap/style.css
@@ -31,7 +31,7 @@
     padding: 0.5rem var(--main-padding);
     gap: 1rem;
 
-    > div.field {
+    > label {
       display: flex;
       align-items: baseline;
       flex-shrink: 0;
@@ -39,7 +39,7 @@
       cursor: pointer;
       color: var(--color);
 
-      > label {
+      > span:first-child {
         color: var(--off-color);
       }
 
diff --git a/website/styles/chart.css b/website/styles/chart.css
index 86bfd3023..56830dfb9 100644
--- a/website/styles/chart.css
+++ b/website/styles/chart.css
@@ -144,7 +144,7 @@
     margin-right: var(--negative-main-padding);
     margin-left: var(--negative-main-padding);
 
-    div.field {
+    :is(div.field, label:has(> select)) {
       display: flex;
       flex-shrink: 0;
       gap: 0.375rem;