docs: fix scrollbar

docs/app/global.css

@@ -248,3 +248,14 @@
 html {
 	scroll-behavior: smooth;
 }
+
+@layer utilities {
+	.no-scrollbar::-webkit-scrollbar {
+	  display: none;
+	}
+	.no-scrollbar {
+	  -ms-overflow-style: none;
+	  scrollbar-width: none;
+	}
+  }
+  

docs/components/builder/index.tsx

@@ -28,6 +28,7 @@ import { useAtom } from "jotai";
 import { optionsAtom } from "./store";
 import { useTheme } from "next-themes";
 import { ScrollArea } from "../ui/scroll-area";
+import styles from "./builder.module.css";
 const frameworks = [
 	{
 		title: "Next.js",
@@ -268,8 +269,18 @@ export function Builder() {
 				</DialogHeader>
 
 				<div className="flex gap-4 md:gap-12 flex-col md:flex-row items-center md:items-start">
-					<ScrollArea className="w-4/12">
+					<div className={cn("w-4/12")}>
-						<div className="overflow-scroll h-[580px] relative">
+						<div
+							className="overflow-scroll h-[580px] relative"
+							style={{
+								scrollbarWidth: "none",
+								scrollbarColor: "transparent transparent",
+								//@ts-expect-error
+								"&::-webkit-scrollbar": {
+									display: "none",
+								},
+							}}
+						>
 							{options.signUp ? (
 								<AuthTabs
 									tabs={[
@@ -289,8 +300,18 @@ export function Builder() {
 								<SignIn />
 							)}
 						</div>
-					</ScrollArea>
+					</div>
-					<ScrollArea className="w-[45%] flex-grow">
+					<ScrollArea
+						className="w-[45%] flex-grow"
+						style={{
+							scrollbarWidth: "none",
+							scrollbarColor: "transparent transparent",
+							//@ts-expect-error
+							"&::-webkit-scrollbar": {
+								display: "none",
+							},
+						}}
+					>
 						<div className="h-[580px]">
 							{currentStep === 0 ? (
 								<Card className="rounded-none flex-grow h-full">