UI: Use native scroll bar for codeblocks and some elements for better performance

.changeset/little-spies-rest.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Use native scroll bar for codeblocks and some elements for better performance

packages/ui/css/preset.css

@@ -227,6 +227,22 @@
   }
 }
 
+@utility fd-scroll-container {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: var(--color-fd-border);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
 @utility fd-steps {
   counter-reset: step;
   position: relative;

packages/ui/css/shiki.css

@@ -4,8 +4,9 @@
   }
 
   code .line {
-    min-height: 1em;
-    @apply relative inline-block w-full;
+    line-height: 1.45em;
+    min-height: 1.45em;
+    @apply relative;
   }
 
   &[data-line-numbers] code .twoslash-meta-line {
@@ -48,10 +49,6 @@
     @apply text-fd-diff-add-symbol;
   }
 
-  code .diff {
-    @apply relative;
-  }
-
   .highlighted {
     @apply bg-fd-primary/10;
   }

packages/ui/src/components/codeblock.tsx

@@ -51,7 +51,7 @@ export const Pre = forwardRef<HTMLPreElement, HTMLAttributes<HTMLPreElement>>(
     return (
       <pre
         ref={ref}
-        className={cn('size-full *:block *:w-full', className)}
+        className={cn('min-w-full w-max *:flex *:flex-col', className)}
         {...props}
       >
         {props.children}
@@ -134,7 +134,7 @@ export const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(
           ref={areaRef}
           {...viewportProps}
           className={cn(
-            'text-[13px] py-3.5 overflow-auto [&_.line]:px-4 max-h-[600px] [scrollbar-width:thin]',
+            'text-[13px] py-3.5 overflow-auto [&_.line]:px-4 max-h-[600px] fd-scroll-container',
             props['data-line-numbers'] && '[&_.line]:pl-3',
             viewportProps?.className,
           )}