Label the control, not the box it came in — and keep the inspector on its side

assets/css/builder.css

@@ -240,8 +240,10 @@
 	/* One rail's worth of room, so the rail follows the work: the palette
 	   while adding, the inspector the moment a field is selected — otherwise
 	   a narrow window could select a field and have nowhere to edit it. */
+	/* The inspector keeps its own side of the room: canvas left, editor
+	   right, exactly where it lives at full width — only the palette yields. */
 	.atfb--has-selection .atfb__body {
-		grid-template-columns: minmax( 220px, 260px ) 1fr;
+		grid-template-columns: minmax( 0, 1fr ) minmax( 220px, 280px );
 	}
 
 	.atfb--has-selection .atfb__palette {
@@ -250,7 +252,6 @@
 
 	.atfb--has-selection .atfb__inspector {
 		display: block;
-		order: -1;
 	}
 }
 
@@ -267,7 +268,7 @@
 	/* Even here a selected field keeps its editor: the inspector takes the
 	   rail back and the canvas keeps the rest. */
 	.atfb--has-selection .atfb__body {
-		grid-template-columns: minmax( 200px, 240px ) 1fr;
+		grid-template-columns: minmax( 0, 1fr ) minmax( 200px, 240px );
 	}
 }
 

assets/js/builder.js

@@ -440,12 +440,23 @@ var allTerrainFormsBuilder = function(exports) {
     });
   }
   function row(label, control2, hint2) {
-    const id = control2.id || `atf-c-${Math.random().toString(36).slice(2, 9)}`;
-    control2.id = id;
+    const target = control2.matches("input, select, textarea, button") ? control2 : control2.querySelector("input, select, textarea");
+    if (target) {
+      const id = target.id || `atf-c-${Math.random().toString(36).slice(2, 9)}`;
+      target.id = id;
+      return el("div", {
+        class: "atfb-row",
+        children: [
+          el("label", { class: "atfb-row__label", text: label, attrs: { for: id } }),
+          control2,
+          hint2 ? el("p", { class: "atfb-row__hint", text: hint2 }) : null
+        ]
+      });
+    }
     return el("div", {
       class: "atfb-row",
       children: [
-        el("label", { class: "atfb-row__label", text: label, attrs: { for: id } }),
+        el("span", { class: "atfb-row__label", text: label }),
         control2,
         hint2 ? el("p", { class: "atfb-row__hint", text: hint2 }) : null
       ]

src/ui.ts

@@ -106,16 +106,39 @@ export function icon( slug: string ): HTMLElement {
 	} );
 }
 
-/** A labelled control row for the inspector. */
+/**
+ * A labelled control row for the inspector.
+ *
+ * A `<label for>` may only point at a form control. When the control passed in
+ * is a wrapper — a flex of input-plus-button, a group of tick boxes — the id
+ * lands on the first real control inside it, and a wrapper holding none gets a
+ * plain heading span instead of a label, because a label bound to a `<div>` is
+ * the thing DevTools rightly flags on every field selection.
+ */
 export function row( label: string, control: HTMLElement, hint?: string ): HTMLElement {
-	const id = control.id || `atf-c-${ Math.random().toString( 36 ).slice( 2, 9 ) }`;
-
-	control.id = id;
+	const target = control.matches( 'input, select, textarea, button' )
+		? control
+		: control.querySelector< HTMLElement >( 'input, select, textarea' );
+
+	if ( target ) {
+		const id = target.id || `atf-c-${ Math.random().toString( 36 ).slice( 2, 9 ) }`;
+
+		target.id = id;
+
+		return el( 'div', {
+			class: 'atfb-row',
+			children: [
+				el( 'label', { class: 'atfb-row__label', text: label, attrs: { for: id } } ),
+				control,
+				hint ? el( 'p', { class: 'atfb-row__hint', text: hint } ) : null,
+			],
+		} );
+	}
 
 	return el( 'div', {
 		class: 'atfb-row',
 		children: [
-			el( 'label', { class: 'atfb-row__label', text: label, attrs: { for: id } } ),
+			el( 'span', { class: 'atfb-row__label', text: label } ),
 			control,
 			hint ? el( 'p', { class: 'atfb-row__hint', text: hint } ) : null,
 		],