transparent scrollbar

assets/globals.css

@@ -369,3 +369,12 @@ body {
   z-index: 1;
   filter: blur(1px);
 }
+
+.transparent-scroll {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.transparent-scroll::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}

components/editor/ask-ai/prompt-builder/content-modal.tsx

@@ -16,7 +16,7 @@ export const ContentModal = ({
 }) => {
   const [collapsed, setCollapsed] = useState(["colors", "theme"]);
   return (
-    <main className="overflow-x-hidden max-h-[50dvh] overflow-y-auto">
+    <main className="overflow-x-hidden max-h-[50dvh] overflow-y-auto transparent-scroll">
       <section className="w-full border-b border-neutral-800/80 px-6 py-3.5 sticky top-0 bg-neutral-900 z-10">
         <div className="flex items-center justify-between gap-3">
           <p className="text-base font-semibold text-neutral-200">

components/editor/ask-ai/prompt-builder/tailwind-colors.tsx

@@ -26,7 +26,7 @@ export const TailwindColors = ({
   return (
     <div
       ref={ref}
-      className="flex items-center justify-start gap-3 overflow-x-auto px-5 scrollbar-hide"
+      className="flex items-center justify-start gap-3 overflow-x-auto px-5 transparent-scroll"
     >
       {TAILWIND_COLORS.map((color) => (
         <div