From e57164cbb786bcf0dbefff7196734a4584a16646 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Thu, 11 Jun 2026 12:44:59 +0200
Subject: [PATCH 1/2] formatting

---
 resources/developer-mode.mjs |  2 +-
 resources/main.css           | 72 +++++++++++++++++++++++++++++++-----
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs
index 0d250eb57..fdd254775 100644
--- a/resources/developer-mode.mjs
+++ b/resources/developer-mode.mjs
@@ -72,7 +72,7 @@ function createCheckboxUI(labelValue, initialValue, paramsUpdateCallback) {
     };
 
     const label = document.createElement("label");
-    label.append(checkbox, " ", span(labelValue));
+    label.append(checkbox, span(labelValue));
 
     return label;
 }
diff --git a/resources/main.css b/resources/main.css
index 279f2a413..a2f6e70ff 100644
--- a/resources/main.css
+++ b/resources/main.css
@@ -10,7 +10,6 @@
     --text-width: 650px;
     --metrics-line-height: 25px;
     --scrollbar-width: 10px;
-    --developer-mode-settings-height: 280px;
 }
 
 body {
@@ -226,24 +225,41 @@ button,
     position: fixed;
     left: 10px;
     top: 10px;
+    max-height: calc(100vh - 20px);
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    box-sizing: border-box;
+}
+
+.developer-mode details {
+    display: grid;
+    grid-template-rows: min-content minmax(0, 1fr);
+    min-height: 0;
 }
 
 .developer-mode summary {
     user-select: none;
+    font-size: 20px;
     cursor: pointer;
     padding: 1rem;
     margin: -1rem -1rem 0 -1rem;
 }
 
 .developer-mode-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
     padding-bottom: 1rem;
+    box-sizing: border-box;
 }
 
 .developer-mode .suites {
-    max-height: calc(100vh - var(--developer-mode-settings-height));
+    flex: 0 1 auto;
+    min-height: 0;
     margin-right: calc(0px - var(--scrollbar-width));
     padding-right: var(--scrollbar-width);
-    overflow: auto;
+    overflow-y: auto;
 }
 
 .developer-mode-content ol {
@@ -253,6 +269,7 @@ button,
 }
 .developer-mode-content .button-bar {
     display: flex;
+    flex: none;
     margin-top: 5px;
     gap: 3px;
 }
@@ -265,20 +282,54 @@ button,
     content: " ✘";
 }
 
-.developer-mode-content .settings label {
+.developer-mode-content .settings {
+    flex: none;
+    display: grid;
+    /* Col 1: checkbox, Col 2: text, Col 3: input, Col 4: value */
+    grid-template-columns: min-content 1fr 1fr 5em;
+    align-items: center;
+    column-gap: 4px;
+    row-gap: 4px;
+}
+.developer-mode-content .settings hr {
+    grid-column: 1 / -1;
     width: 100%;
+    margin: 8px 0;
+}
+
+.developer-mode-content .settings label {
+    display: contents;
+}
+.developer-mode-content .settings label > span:first-child {
+    /* Range and Select labels start here */
+    grid-column: 2;
+}
+.developer-mode-content .settings label:not(:has(input[type="checkbox"]))::before {
+    content: "•";
+    grid-column: 1;
+    margin-right: 0.2em; /* match checkbox margin so it visually centers */
     display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--foreground);
 }
-.developer-mode-content .settings label * {
-    flex: 1;
+.developer-mode-content input[type="checkbox"] {
+    margin: 0;
+    margin-right: 0.2em;
 }
 .developer-mode-content .settings input[type="checkbox"] {
-    flex: 0;
-    margin-left: 0px;
+    grid-column: 1;
+}
+.developer-mode-content .settings input[type="checkbox"] + span {
+    /* Checkbox text spans the rest of the row */
+    grid-column: 2 / -1;
+}
+.developer-mode-content .settings select {
+    /* Select spans input and value columns */
+    grid-column: 3 / -1;
 }
 .developer-mode-content .settings .range-label-data {
-    flex: 0;
-    min-width: 5em;
+    grid-column: 4;
     text-align: right;
 }
 
@@ -313,6 +364,7 @@ button,
     background: rgba(255, 255, 255, 0.1);
 }
 .developer-mode-content hr {
+    flex: none;
     width: initial;
     margin: 10px 0;
 }

From e47355c6749698318f57ad6939a7ceeb7dcaa3d4 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Thu, 11 Jun 2026 12:59:00 +0200
Subject: [PATCH 2/2] pre-format

---
 resources/main.css | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/resources/main.css b/resources/main.css
index a2f6e70ff..86c8207ed 100644
--- a/resources/main.css
+++ b/resources/main.css
@@ -288,12 +288,10 @@ button,
     /* Col 1: checkbox, Col 2: text, Col 3: input, Col 4: value */
     grid-template-columns: min-content 1fr 1fr 5em;
     align-items: center;
-    column-gap: 4px;
-    row-gap: 4px;
+    gap: 4px;
 }
 .developer-mode-content .settings hr {
     grid-column: 1 / -1;
-    width: 100%;
     margin: 8px 0;
 }
 
@@ -308,17 +306,12 @@ button,
     content: "•";
     grid-column: 1;
     margin-right: 0.2em; /* match checkbox margin so it visually centers */
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    place-self: center;
     color: var(--foreground);
 }
 .developer-mode-content input[type="checkbox"] {
-    margin: 0;
-    margin-right: 0.2em;
-}
-.developer-mode-content .settings input[type="checkbox"] {
     grid-column: 1;
+    margin: 0 0.2em 0 0;
 }
 .developer-mode-content .settings input[type="checkbox"] + span {
     /* Checkbox text spans the rest of the row */