chore: fix tooltip for docs and whitespaces

docs/app/page.tsx

@@ -2,7 +2,6 @@ import Section from "@/components/landing/section";
 import Hero from "@/components/landing/hero";
 import Features from "@/components/features";
 import Link from "next/link";
-import { PlusSvg } from "@/components/landing/section-svg";
 
 async function getGitHubStars() {
 	try {

docs/components/mdx/database-tables.tsx

@@ -13,7 +13,7 @@ import {
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
-} from "../ui/tooltip";
+} from "../ui/tooltip-docs";
 
 interface Field {
 	name: string;

docs/components/side-bar.tsx

@@ -39,7 +39,7 @@ export default function ArticleLayout() {
 			<aside
 				className={cn(
 					"md:transition-all",
-					"border-r border-lines md:flex hidden md:w-[268px] lg:w-[286px] overflow-y-auto absolute top-[57px] h-[calc(92dvh--7px)] flex-col justify-between w-[var(--fd-sidebar-width)]",
+					"border-r border-lines top-[43px] md:flex hidden md:w-[268px] lg:w-[286px] overflow-y-auto absolute h-[calc(92dvh-7px)] flex-col justify-between w-[var(--fd-sidebar-width)]",
 				)}
 			>
 				<div>

docs/components/ui/tooltip-docs.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		>
+			{props.children}
+			<TooltipPrimitive.Arrow className="fill-primary -mt-[1px]" />
+		</TooltipPrimitive.Content>
+	</TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

docs/components/ui/tooltip.tsx

@@ -52,7 +52,7 @@ function TooltipContent({
 				{...props}
 			>
 				{children}
-				<TooltipPrimitive.Arrow className="bg-primary dark:bg-stone-900 dark:fill-stone-900 fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+				<TooltipPrimitive.Arrow className="-z-10 relative bg-primary dark:bg-stone-900 dark:fill-stone-900 fill-primary size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
 			</TooltipPrimitive.Content>
 		</TooltipPrimitive.Portal>
 	);