Update developer menu layout (#543)

- Use gridlayout to avoid fixd settings panel height and better adjust to window height
- Indent settings without chekcbox
- Better style select elements
- Use consistent spacing around checkbox in settings and suite selection

Author: camillobruni

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;
 }

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,47 @@ button,
     content: " ✘";
 }
 
+.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;
+    gap: 4px;
+}
+.developer-mode-content .settings hr {
+    grid-column: 1 / -1;
+    margin: 8px 0;
+}
+
 .developer-mode-content .settings label {
-    width: 100%;
-    display: flex;
+    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 */
+    place-self: center;
+    color: var(--foreground);
+}
+.developer-mode-content input[type="checkbox"] {
+    grid-column: 1;
+    margin: 0 0.2em 0 0;
 }
-.developer-mode-content .settings label * {
-    flex: 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 input[type="checkbox"] {
-    flex: 0;
-    margin-left: 0px;
+.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 +357,7 @@ button,
     background: rgba(255, 255, 255, 0.1);
 }
 .developer-mode-content hr {
+    flex: none;
     width: initial;
     margin: 10px 0;
 }