UI: Test content-visibility CSS features

fuma-nama · Dec 22, 2024 · 1810868 · 1810868
1 parent 3445182
commit 1810868
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/.changeset/spotty-poems-appear.md b/.changeset/spotty-poems-appear.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Enable `content-visibility` CSS features
diff --git a/packages/ui/src/page.tsx b/packages/ui/src/page.tsx
@@ -263,8 +263,18 @@ function EditOnGitHub({
 export const DocsBody = forwardRef<
   HTMLDivElement,
   HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('prose', className)} {...props} />
+>((props, ref) => (
+  <div
+    ref={ref}
+    {...props}
+    className={cn('prose contain-content', props.className)}
+    style={
+      {
+        contentVisibility: 'auto',
+        ...props.style,
+      } as object
+    }
+  />
 ));
 
 DocsBody.displayName = 'DocsBody';