app ux nits

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -62,7 +62,7 @@
 			{#if $bgRuns.length > 0}
 				<Popover notClickable>
 					<span class="!text-2xs text-tertiary inline-flex gap-1 items-center"
-						><Loader2 size={10} class="animate-spin" /> ({$bgRuns.length})
+						><Loader2 size={10} class="animate-spin" /> {$bgRuns.length}
 					</span>
 					<span slot="text"
 						><div class="flex flex-col">

frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte

@@ -126,12 +126,12 @@
 		color={timeout ? 'blue' : 'light'}
 		variant={timeout ? 'contained' : 'border'}
 		size="xs"
-		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
+		btnClasses="!rounded-r-none text-tertiary !text-2xs {timeout ? '!border !border-blue-500' : ''}"
 		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
 			? `every ${interval / 1000} seconds`
 			: 'once'}"
 	>
-		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} /> &nbsp;({componentNumber})
+		<RefreshCw class={loading ? 'animate-spin' : ''} size={14} /> &nbsp;{componentNumber}
 	</Button>
 
 	<ButtonDropdown hasPadding={true}>

frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -190,7 +190,7 @@
 			{#each componentsFiltered as { title, components, presets }, index (index)}
 				{#if components.length || presets?.length}
 					<div>
-						<ListItem title={`${title} (${components.length})`}>
+						<ListItem title={`${title}`} subtitle={`(${components.length})`}>
 							<div class="flex flex-wrap gap-3 py-2">
 								{#each components as item (item)}
 									<div class="w-20">

frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte

@@ -14,6 +14,7 @@
 	export let isOpen = false
 	export let tooltip: string | undefined = undefined
 	export let documentationLink: string | undefined = undefined
+	export let subtitle: string | undefined = undefined
 
 	const dispatch = createEventDispatcher()
 
@@ -39,13 +40,14 @@
 			<h1 class="text-sm font-semibold text-left">
 				<slot name="title">
 					{title}
+					{#if subtitle}
+						<span class="text-2xs text-tertiary ml-1">
+							{subtitle}
+						</span>
+					{/if}
 				</slot>
 				{#if tooltip}
-					<Tooltip
-						class="ml-1"
-						documentationLink="https://github.com/windmill-labs/windmill-custom-component-template"
-						>{tooltip}</Tooltip
-					>
+					<Tooltip class="ml-1" {documentationLink}>{tooltip}</Tooltip>
 				{/if}
 			</h1>
 			<ChevronDown class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
@@ -59,13 +61,14 @@
 		<h1 class="text-base font-semibold text-left px-2 py-1 text-secondary">
 			<slot name="title">
 				{title}
+				{#if subtitle}
+					<span class="text-2xs text-tertiary ml-1">
+						{subtitle}
+					</span>
+				{/if}
 			</slot>
 			{#if tooltip}
-				<Tooltip
-					class="ml-1"
-					documentationLink="https://github.com/windmill-labs/windmill-custom-component-template"
-					>{tooltip}</Tooltip
-				>
+				<Tooltip class="ml-1" {documentationLink}>{tooltip}</Tooltip>
 			{/if}
 		</h1>
 		<div class="px-2">