From 8207ae4e01049688d81e13c852ddcea384b6328c Mon Sep 17 00:00:00 2001
From: Bereket Engida <bekacru@gmail.com>
Date: Thu, 12 Jun 2025 22:11:44 -0700
Subject: [PATCH] docs: fix scrollbar

---
 docs/app/global.css               | 11 +++++++++++
 docs/components/builder/index.tsx | 29 +++++++++++++++++++++++++----
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/docs/app/global.css b/docs/app/global.css
index f660cc321f..93ecb8167d 100644
--- a/docs/app/global.css
+++ b/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;
+	}
+  }
+  
\ No newline at end of file
diff --git a/docs/components/builder/index.tsx b/docs/components/builder/index.tsx
index b5d77848b6..09f191ac30 100644
--- a/docs/components/builder/index.tsx
+++ b/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="overflow-scroll h-[580px] relative">
+					<div className={cn("w-4/12")}>
+						<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>
-					<ScrollArea className="w-[45%] flex-grow">
+					</div>
+					<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">