UI: Add default 'max-height' to codeblocks

.changeset/nervous-lemons-search.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': minor
+---
+
+Add default 'max-height' to codeblocks

.changeset/slimy-days-invent.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix empty space on search dialog

packages/core/src/utils/use-anchor-observer.ts

@@ -25,7 +25,7 @@ export function useAnchorObserver(watch: string[]): string | undefined {
           return f ?? watch[0];
         });
       },
-      { rootMargin: `-60px 0% -70% 0%`, threshold: 1 },
+      { rootMargin: `-60px 0% -75% 0%`, threshold: 1 },
     );
 
     const scroll = (): void => {

packages/ui/src/components/codeblock.tsx

@@ -44,7 +44,7 @@ export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
 export const Pre = forwardRef<HTMLPreElement, HTMLAttributes<HTMLPreElement>>(
   ({ className, ...props }, ref) => {
     return (
-      <pre ref={ref} className={cn('p-4', className)} {...props}>
+      <pre ref={ref} className={cn('max-h-[400px] p-4', className)} {...props}>
         {props.children}
       </pre>
     );

packages/ui/src/components/dialog/search-algolia.tsx

@@ -61,14 +61,16 @@ export default function AlgoliaSearchDialog({
       results={query.data ?? []}
       {...props}
       footer={
-        <>
-          {tags ? (
+        tags ? (
+          <>
             <TagsList tag={tag} onTagChange={setTag} items={tags}>
               {showAlgolia ? <AlgoliaTitle /> : null}
             </TagsList>
-          ) : null}
-          {props.footer}
-        </>
+            {props.footer}
+          </>
+        ) : (
+          props.footer
+        )
       }
     />
   );

packages/ui/src/components/dialog/search-default.tsx

@@ -57,12 +57,14 @@ export default function DefaultSearchDialog({
       results={query.data ?? []}
       {...props}
       footer={
-        <>
-          {tags ? (
+        tags ? (
+          <>
             <TagsList tag={tag} onTagChange={setTag} items={tags} />
-          ) : null}
-          {props.footer}
-        </>
+            {props.footer}
+          </>
+        ) : (
+          props.footer
+        )
       }
     />
   );

packages/ui/src/components/dialog/search.tsx

@@ -68,12 +68,15 @@ export function SearchDialog({
   );
 
   return (
-    <CommandDialog open={open} onOpenChange={onOpenChange} footer={footer}>
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
       <Search
         {...props}
         items={props.results === 'empty' ? defaultItems : props.results}
         hideResults={props.results === 'empty' && defaultItems.length === 0}
       />
+      {footer ? (
+        <div className="mt-auto flex flex-col border-t p-3">{footer}</div>
+      ) : null}
     </CommandDialog>
   );
 }

packages/ui/src/components/layout/toc.tsx

@@ -136,7 +136,7 @@ function TOCItems({
           <div
             className={cn(
               'flex flex-col gap-1 text-fd-muted-foreground',
-              !isMenu && 'border-s-2',
+              !isMenu && 'border-s-2 border-fd-foreground/10',
             )}
           >
             {items.map((item) => (

packages/ui/src/components/ui/command.tsx

@@ -124,26 +124,20 @@ const CommandItem = React.forwardRef<
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
-const CommandDialog = React.forwardRef<
-  HTMLDivElement,
-  DialogProps & {
-    footer?: React.ReactNode;
-  }
->(({ footer, children, ...props }, ref) => (
-  <CommandPrimitive.Dialog
-    ref={ref}
-    shouldFilter={false}
-    loop
-    contentClassName="fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm origin-left -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
-    overlayClassName="fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in"
-    {...props}
-  >
-    {children}
-    {footer ? (
-      <div className="mt-auto flex flex-col border-t p-3">{footer}</div>
-    ) : null}
-  </CommandPrimitive.Dialog>
-));
+const CommandDialog = React.forwardRef<HTMLDivElement, DialogProps>(
+  ({ children, ...props }, ref) => (
+    <CommandPrimitive.Dialog
+      ref={ref}
+      shouldFilter={false}
+      loop
+      contentClassName="fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm origin-left -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
+      overlayClassName="fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in"
+      {...props}
+    >
+      {children}
+    </CommandPrimitive.Dialog>
+  ),
+);
 
 CommandDialog.displayName = CommandPrimitive.Dialog.displayName;