Developer Mode UI Improvements (#216)

- Enlarge clickable targets (title and list items)
- Make buttons fill space horizontally
- Match border radius with other runner buttons

resources/developer-mode.mjs

@@ -124,6 +124,8 @@ export function createUIForSuites() {
     }
 
     control.appendChild(ol);
+    const buttons = control.appendChild(document.createElement("div"));
+    buttons.className = "button-bar";
 
     let button = document.createElement("button");
     button.textContent = "Select all";
@@ -133,7 +135,7 @@ export function createUIForSuites() {
 
         updateURL();
     };
-    control.appendChild(button);
+    buttons.appendChild(button);
 
     button = document.createElement("button");
     button.textContent = "Unselect all";
@@ -143,7 +145,7 @@ export function createUIForSuites() {
 
         updateURL();
     };
-    control.appendChild(button);
+    buttons.appendChild(button);
 
     return control;
 }

resources/main.css

@@ -99,7 +99,6 @@ main {
     top: -110px;
 }
 
-
 h1 {
     margin-top: 30px;
     font-size: 40px;
@@ -189,11 +188,11 @@ button,
 }
 
 .developer-mode {
-    border-radius: 5px;
+    border-radius: 10px;
     max-height: 80vh;
     padding: 1rem;
     background: #602525;
-    border: 1px solid white;
+    border: 3px solid rgba(255, 255, 255, 0.5);
     position: fixed;
     left: 10px;
     top: 10px;
@@ -204,6 +203,8 @@ button,
 .developer-mode summary {
     user-select: none;
     cursor: pointer;
+    padding: 1rem;
+    margin: -1rem;
 }
 
 .developer-mode-content {
@@ -215,17 +216,26 @@ button,
 .developer-mode-content ol {
     list-style: none;
     padding: 0;
+    margin: 1em 0 0.5em 0;
+}
+.developer-mode-content .button-bar {
+    display: flex;
+    margin-top: 5px;
+    gap: 3px;
 }
 
 .developer-mode-content button {
     background: white;
-    padding: 3px;
+    flex: auto;
+    padding: 5px;
     appearance: button;
     border: 1px solid white;
-    margin-top: 5px;
-    margin-inline-end: 3px;
+    border-radius: 2px;
+}
+.developer-mode-content label {
+    width: 100%;
+    display: inline-block;
 }
-
 .developer-mode-content hr {
     width: initial;
     margin: 10px 0;