From 1405c47b50b56376fc31ffa6dca3324cc6eadc86 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Wed, 8 Oct 2025 13:44:59 +0200
Subject: [PATCH] Make entire collapsible header clickable

- Changed outer div to button element
- Added w-full and text-left classes
- Now click anywhere on header (icon, text, chevron) to expand/collapse
---
 packages/web-ui/src/tools/renderer-registry.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/web-ui/src/tools/renderer-registry.ts b/packages/web-ui/src/tools/renderer-registry.ts
index 9d753610..d951b10d 100644
--- a/packages/web-ui/src/tools/renderer-registry.ts
+++ b/packages/web-ui/src/tools/renderer-registry.ts
@@ -98,17 +98,15 @@ export function renderCollapsibleHeader(
 				: "text-foreground";
 
 	return html`
-		<div class="flex items-center justify-between gap-2 text-sm text-muted-foreground">
+		<button @click=${toggleContent} class="flex items-center justify-between gap-2 text-sm text-muted-foreground w-full text-left hover:text-foreground transition-colors">
 			<div class="flex items-center gap-2">
 				${state === "inprogress" ? statusIcon(Loader, "text-foreground animate-spin") : ""}
 				${statusIcon(toolIcon, toolIconColor)}
 				<span>${text}</span>
 			</div>
-			<button @click=${toggleContent} class="hover:text-foreground transition-colors">
-				<span class="inline-block text-muted-foreground" ${ref(chevronRef)}>
-					${icon(defaultExpanded ? ChevronDown : ChevronRight, "sm")}
-				</span>
-			</button>
-		</div>
+			<span class="inline-block text-muted-foreground" ${ref(chevronRef)}>
+				${icon(defaultExpanded ? ChevronDown : ChevronRight, "sm")}
+			</span>
+		</button>
 	`;
 }