feat: make analysis page a lot more condensed with masonry/grid-lanes

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} />

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);

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>

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 {