diff --git a/src/lib/components/custom-property-inspector/CustomPropertyInspector.svelte b/src/lib/components/custom-property-inspector/CustomPropertyInspector.svelte
index aa479d9..eb54a8b 100644
--- a/src/lib/components/custom-property-inspector/CustomPropertyInspector.svelte
+++ b/src/lib/components/custom-property-inspector/CustomPropertyInspector.svelte
@@ -54,11 +54,13 @@
 		}
 	})
 
-	$effect(() => {
+	$effect.pre(() => {
 		if (css) {
 			// Reset expanded items when CSS changes to avoid null-pointers
+			// Runs pre-commit so this reset lands in the same render as the new
+			// tree_items, instead of a second full-tree render pass right after.
 			expanded.set([])
-			// eslint-disable-next-line eslint-plugin-unicorn/no-null
+			// eslint-disable-next-line eslint-plugin-unicorn/no-null -- null is what Melt UI wants
 			$selectedItem = null
 			search_query = ''
 		}
@@ -183,10 +185,12 @@
 	<section class="list">
 		<header>
 			<h2>Properties</h2>
-			<button type="button" onclick={() => expanded.set([])} class="collapse-all">
-				<Icon name="fold" size={14} />
-				<div class="sr-only">Collapse all</div>
-			</button>
+			{#if filtered_results !== undefined && filtered_results.size > 0}
+				<button type="button" onclick={() => expanded.set([])} class="collapse-all">
+					<Icon name="fold" size={14} />
+					<div class="sr-only">Collapse all</div>
+				</button>
+			{/if}
 			<search>
 				<form method="GET" onsubmit={onsearch}>
 					<label for="search-property" class="sr-only">Search property name</label>
diff --git a/src/lib/components/custom-property-inspector/Tree.svelte b/src/lib/components/custom-property-inspector/Tree.svelte
index b80d34b..44702a9 100644
--- a/src/lib/components/custom-property-inspector/Tree.svelte
+++ b/src/lib/components/custom-property-inspector/Tree.svelte
@@ -19,7 +19,7 @@
 	} = getContext<TreeView>('tree')
 </script>
 
-{#each items as { title, count, index, type, children, parent, location, level, name }}
+{#each items as { title, count, index, type, children, parent, location, level, name } (type === 'property' ? title : `${title}-${index}`)}
 	{@const item_id = type === 'property' ? title : `${title}-${index}`}
 	{@const has_children = type == 'property'}
 	{@const matches = search_query === '' ? [name] : name.split(search_query)}
@@ -67,7 +67,7 @@
 			{/if}
 		</button>
 
-		{#if has_children && children}
+		{#if has_children && children && $isExpanded(item_id)}
 			<ul use:melt={$group({ id: item_id })}>
 				<Tree items={children} {search_query} />
 			</ul>
@@ -77,7 +77,8 @@
 
 <style>
 	button[role='treeitem'] {
-		contain-intrinsic-size: auto 28.8px;
+		content-visibility: auto;
+		contain-intrinsic-size: auto 1.8rem;
 		text-align: start;
 		padding-inline: var(--space-2);
 		padding-block: 0.25rem;
diff --git a/src/routes/(public)/custom-property-inspector/spec.ts b/src/routes/(public)/custom-property-inspector/spec.ts
index 6cd3006..fcf8205 100644
--- a/src/routes/(public)/custom-property-inspector/spec.ts
+++ b/src/routes/(public)/custom-property-inspector/spec.ts
@@ -62,6 +62,13 @@ test.describe('with css', () => {
 
 		// Starting state
 		await expect.soft(properties).toHaveCount(4)
+
+		// Locations are only rendered in the DOM once their property is expanded,
+		// so open every property and keep them open for the rest of the test
+		for (let property of await properties.all()) {
+			await property.click()
+		}
+
 		await expect.soft(locations).toHaveCount(6)
 		await expect.soft(unused_toggler).toHaveAttribute('aria-pressed', 'false')
 		await expect.soft(undefined_toggler).toHaveAttribute('aria-pressed', 'false')