From 6da9fd9ff12f5f201c8c8fa4075e6206a208c35a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Sun, 19 Oct 2025 23:16:26 +0000
Subject: [PATCH] tailwind classes editor chrome fix

---
 .../editor/componentsPanel/CssProperty.svelte | 66 +++++++++----------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index e8bff06d62..8fa7f5d9ab 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -220,41 +220,39 @@
 
 			{#if value.class !== undefined || forceClass}
 				<!-- svelte-ignore a11y_label_has_associated_control -->
-				<label class="block">
-					<div class="text-xs font-medium text-tertiary mb-1">
-						Tailwind classes
-						<Tooltip light documentationLink="https://tailwindcss.com/">
-							Use any tailwind classes to style your component
-						</Tooltip>
+				<div class="text-xs font-medium text-tertiary mb-1">
+					Tailwind classes
+					<Tooltip light documentationLink="https://tailwindcss.com/">
+						Use any tailwind classes to style your component
+					</Tooltip>
+				</div>
+				<div class="relative">
+					<SimpleEditor
+						class="h-24 border !rounded-none"
+						lang="tailwindcss"
+						{tailwindClasses}
+						bind:code={value.class}
+						fixedOverflowWidgets={true}
+						small
+						automaticLayout
+					/>
+				</div>
+				{#if componentType && ccomponents?.[componentType]?.quickstyle?.[name]?.quickTailwindClasses}
+					<div class="flex flex-row gap-1 items-center mt-1 flex-wrap">
+						{#each ccomponents?.[componentType]?.quickstyle?.[name]?.quickTailwindClasses ?? [] as cls}
+							<Badge
+								baseClass="cursor-pointer"
+								small
+								on:click={() => {
+									value.class = value.class === '' ? cls : `${value.class} ${cls}`
+									render++
+								}}
+							>
+								{cls}
+							</Badge>
+						{/each}
 					</div>
-					<div class="relative">
-						<SimpleEditor
-							class="h-24 border !rounded-none"
-							lang="tailwindcss"
-							{tailwindClasses}
-							bind:code={value.class}
-							fixedOverflowWidgets={true}
-							small
-							automaticLayout
-						/>
-					</div>
-					{#if componentType && ccomponents?.[componentType]?.quickstyle?.[name]?.quickTailwindClasses}
-						<div class="flex flex-row gap-1 items-center mt-1 flex-wrap">
-							{#each ccomponents?.[componentType]?.quickstyle?.[name]?.quickTailwindClasses ?? [] as cls}
-								<Badge
-									baseClass="cursor-pointer"
-									small
-									on:click={() => {
-										value.class = value.class === '' ? cls : `${value.class} ${cls}`
-										render++
-									}}
-								>
-									{cls}
-								</Badge>
-							{/each}
-						</div>
-					{/if}
-				</label>
+				{/if}
 			{/if}
 			<div class="flex flex-row justify-between items-center">
 				<div class="text-xs flex flex-row items-center justify-center">