From 537d90a7de530d3816c7e0da2b62ab5ed767335a Mon Sep 17 00:00:00 2001
From: Bart Veneman <bartveneman@gmail.com>
Date: Fri, 27 Feb 2026 22:33:31 +0100
Subject: [PATCH 1/2] feat: make analysis page a lot more condensed with
 masonry/grid-lanes

---
 src/lib/components/stats/Report.svelte    |  1 +
 src/lib/components/stats/Selectors.svelte | 16 +++++++--
 src/lib/css/style.css                     | 42 +++++++++++++++++++++--
 3 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/stats/Report.svelte b/src/lib/components/stats/Report.svelte
index 26daa7d..0c42dcf 100644
--- a/src/lib/components/stats/Report.svelte
+++ b/src/lib/components/stats/Report.svelte
@@ -31,6 +31,7 @@
 	.group {
 		display: grid;
 		gap: var(--space-8);
+		container-type: inline-size;
 
 		@media (min-width: 66rem) {
 			gap: var(--space-16);
diff --git a/src/lib/components/stats/Selectors.svelte b/src/lib/components/stats/Selectors.svelte
index a050349..943349a 100644
--- a/src/lib/components/stats/Selectors.svelte
+++ b/src/lib/components/stats/Selectors.svelte
@@ -21,7 +21,12 @@
 	interface ValueCountPanelProps {
 		panel_id: string
 		title: string
-		data: { total: number; totalUnique: number; uniquenessRatio: number; uniqueWithLocations: Record<string, CssLocation[]> }
+		data: {
+			total: number
+			totalUnique: number
+			uniquenessRatio: number
+			uniqueWithLocations: Record<string, CssLocation[]>
+		}
 		list_id: string
 		empty_message: string
 		sort_options?: (typeof alphabetical_sorting)[]
@@ -103,7 +108,14 @@
 	}
 </script>
 
-{#snippet value_count_panel({ panel_id, title, data, list_id, empty_message, sort_options = [alphabetical_sorting] }: ValueCountPanelProps)}
+{#snippet value_count_panel({
+	panel_id,
+	title,
+	data,
+	list_id,
+	empty_message,
+	sort_options = [alphabetical_sorting]
+}: ValueCountPanelProps)}
 	<Panel id={panel_id}>
 		<Header>
 			<Heading element="h3">{title}</Heading>
diff --git a/src/lib/css/style.css b/src/lib/css/style.css
index 16da124..303a854 100644
--- a/src/lib/css/style.css
+++ b/src/lib/css/style.css
@@ -577,14 +577,52 @@
 
 		.report-section {
 			display: grid;
-			/* Expensive elements to render, so enable content-visibility */
-			content-visibility: auto;
+
+			/* Only apply when no target inside, otherwise :target styles get clipped */
+			&:not(:has(:target)) {
+				/* Expensive elements to render, so enable content-visibility */
+				content-visibility: auto;
+			}
 
 			/* Making this larger than 24rem will cause horizontal overflows */
 			grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
 			gap: var(--space-4);
 			align-items: start;
 			margin-top: var(--space-4);
+
+			@container (min-width: 33rem) {
+				gap: var(--space-6);
+			}
+
+			@container (min-width: 55rem) {
+				gap: var(--space-8);
+			}
+
+			/* Use as progressive enhancement until we have grid-lanes */
+			@supports (grid-template-rows: masonry) and (not (display: grid-lanes))  {
+				grid-template-rows: masonry;
+			}
+
+			@supports (display: grid-lanes) {
+				display: grid-lanes;
+			}
+
+			& :target {
+				scroll-margin: var(--space-8);
+				outline: 4px dashed var(--fg-400);
+				outline-offset: 4px;
+				animation-delay: 1s;
+				animation-fill-mode: forwards;
+				animation-duration: 2s;
+				animation-name: target-highlight;
+				animation-timing-function: ease-in-out;
+			}
+		}
+
+		@keyframes target-highlight {
+			to {
+				outline-color: transparent;
+			}
 		}
 
 		.report-section-full-width {

From 317b5e7dc73428f4ed38406488b46483a9377e91 Mon Sep 17 00:00:00 2001
From: Bart Veneman <bartveneman@gmail.com>
Date: Fri, 27 Feb 2026 23:02:37 +0100
Subject: [PATCH 2/2] fix: unrelated, but hide atrules table if no atrules
 found

---
 src/lib/components/stats/AtRules.svelte | 44 ++++++++++++++-----------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/stats/AtRules.svelte b/src/lib/components/stats/AtRules.svelte
index 647d27b..f89456d 100644
--- a/src/lib/components/stats/AtRules.svelte
+++ b/src/lib/components/stats/AtRules.svelte
@@ -30,26 +30,32 @@
 		<Panel id="atrules-composition" class="report-section-full-width">
 			<Header>
 				<Heading element="h3">Composition</Heading>
-				<DefinitionList stats={[{ name: 'Atrule names', value: atrules.totalUnique }]} />
+				{#if atrules.total > 0}
+					<DefinitionList stats={[{ name: 'Atrule names', value: atrules.totalUnique }]} />
+				{/if}
 			</Header>
-			<BarChart
-				context="atrules-composition"
-				class="mt-4"
-				items={Object.entries(
-					atrules.uniqueWithLocations as Record<
-						string,
-						{ line: number; column: number; offset: number; length: number }[]
-					>
-				)
-					.map(([atrule_name, locations]) => ({
-						value: `@${atrule_name}`,
-						count: locations.length,
-						locations
-					}))
-					.sort((a, b) => b.count - a.count)}
-				column_headers={['Atrule name', 'Count']}
-				node_type="atrule"
-			/>
+			{#if atrules.total > 0}
+				<BarChart
+					context="atrules-composition"
+					class="mt-4"
+					items={Object.entries(
+						atrules.uniqueWithLocations as Record<
+							string,
+							{ line: number; column: number; offset: number; length: number }[]
+						>
+					)
+						.map(([atrule_name, locations]) => ({
+							value: `@${atrule_name}`,
+							count: locations.length,
+							locations
+						}))
+						.sort((a, b) => b.count - a.count)}
+					column_headers={['Atrule name', 'Count']}
+					node_type="atrule"
+				/>
+			{:else}
+				<Empty>No atrules found</Empty>
+			{/if}
 		</Panel>
 
 		<FontFaces {...fontface} />