Fix layout when in wide mode.

devtools/panel/panel.css

@@ -174,4 +174,27 @@ details.renderer-container[open] > summary.renderer-summary .toggle-icon::before
 	margin-left: 8px;
 	padding: 2px 4px;
 	opacity: 0.3;
-} 
+}
+
+/* Two-column layout for wide panel */
+@media (min-width: 1000px) {
+	.sections-container {
+		display: flex;
+		gap: 20px;
+		align-items: flex-start;
+	}
+	
+	.sections-container .section {
+		flex: 1;
+		margin-bottom: 0;
+	}
+	
+	/* Ensure sections have equal width */
+	.sections-container .section:first-child {
+		min-width: 0; /* Allow flexbox to shrink */
+	}
+	
+	.sections-container .section:last-child {
+		min-width: 0; /* Allow flexbox to shrink */
+	}
+}

devtools/panel/panel.js

@@ -516,8 +516,21 @@ function updateUI() {
 
 	container.appendChild( header );
 
+	const hasRenderers = state.renderers.size > 0;
+	const hasScenes = state.scenes.size > 0;
+
+	// Create sections container if both renderers and scenes exist (for responsive layout)
+	let sectionsContainer = container;
+	if ( hasRenderers && hasScenes ) {
+
+		sectionsContainer = document.createElement( 'div' );
+		sectionsContainer.className = 'sections-container';
+		container.appendChild( sectionsContainer );
+
+	}
+
 	// Add renderers section
-	if ( state.renderers.size > 0 ) {
+	if ( hasRenderers ) {
 
 		const renderersSection = document.createElement( 'div' );
 		renderersSection.className = 'section';
@@ -529,12 +542,12 @@ function updateUI() {
 
 		} );
 
-		container.appendChild( renderersSection );
+		sectionsContainer.appendChild( renderersSection );
 
 	}
 
 	// Add scenes section
-	if ( state.scenes.size > 0 ) {
+	if ( hasScenes ) {
 
 		const scenesSection = document.createElement( 'div' );
 		scenesSection.className = 'section';
@@ -546,7 +559,7 @@ function updateUI() {
 
 		} );
 
-		container.appendChild( scenesSection );
+		sectionsContainer.appendChild( scenesSection );
 
 	}