docs: leverage content-visibility: auto for large lists

metonym · metonym · commit 8ec5cfa594f3 · 2025-02-02T11:08:30.000-08:00
diff --git a/www/components/globals/Languages.svelte b/www/components/globals/Languages.svelte
@@ -43,6 +43,7 @@
           {#each languages as language (language.name)}
             <StructuredListRow
               class={!filteredIds.has(language.name) ? "hidden" : ""}
+              style="content-visibility: auto; contain-intrinsic-size: 0 204px;"
             >
               <StructuredListCell>
                 <div class="mb-5">
diff --git a/www/components/globals/Styles.svelte b/www/components/globals/Styles.svelte
@@ -56,6 +56,7 @@
           {#each styles as style (style.name)}
             <StructuredListRow
               class={!filteredIds.has(style.name) ? "hidden" : ""}
+              style="content-visibility: auto; contain-intrinsic-size: 0 360px;"
             >
               <StructuredListCell>
                 <div class="mb-5">

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@`
`43`	`43`	`{#each languages as language (language.name)}`
`44`	`44`	`<StructuredListRow`
`45`	`45`	`class={!filteredIds.has(language.name) ? "hidden" : ""}`
	`46`	`+ style="content-visibility: auto; contain-intrinsic-size: 0 204px;"`
`46`	`47`	`>`
`47`	`48`	`<StructuredListCell>`
`48`	`49`	`<div class="mb-5">`
Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,7 @@`
`56`	`56`	`{#each styles as style (style.name)}`
`57`	`57`	`<StructuredListRow`
`58`	`58`	`class={!filteredIds.has(style.name) ? "hidden" : ""}`
	`59`	`+ style="content-visibility: auto; contain-intrinsic-size: 0 360px;"`
`59`	`60`	`>`
`60`	`61`	`<StructuredListCell>`
`61`	`62`	`<div class="mb-5">`