From d41bb762820425d783380dad5d2afa6039dcaa5e Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Mon, 16 Dec 2024 00:23:05 +0900
Subject: [PATCH] fix(docs): hide scrollbar in codehike

---
 docs/suspensive.org/src/components/Scrollycoding.tsx | 6 +++---
 docs/suspensive.org/src/styles/globals.css           | 8 ++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/suspensive.org/src/components/Scrollycoding.tsx b/docs/suspensive.org/src/components/Scrollycoding.tsx
index ee8c3e906..2c2679f0a 100644
--- a/docs/suspensive.org/src/components/Scrollycoding.tsx
+++ b/docs/suspensive.org/src/components/Scrollycoding.tsx
@@ -73,7 +73,7 @@ export function Scrollycoding(props: unknown) {
   return (
     <>
       {/* only in desktop */}
-      <SelectionProvider className="my-4 mb-24 hidden gap-4 md:flex">
+      <SelectionProvider className="scrollbar-none my-4 mb-24 hidden gap-4 md:flex">
         <div className="mb-[40vh]" style={{ flex: 1 }}>
           {steps.map((step, i) => (
             <Selectable
@@ -92,7 +92,7 @@ export function Scrollycoding(props: unknown) {
           className="rounded-xl border-2 border-[#ffffff10] bg-[#191919]"
           style={{ flex: 2 }}
         >
-          <div className="sticky top-16 overflow-auto">
+          <div className="scrollbar-none sticky top-16 overflow-auto">
             <Selection
               from={steps.map((step) => (
                 <Code
@@ -121,7 +121,7 @@ export function Scrollycoding(props: unknown) {
           ))}
         </div>
         <div className="-mr-6 rounded-xl" style={{ flex: 2 }}>
-          <div className="sticky top-28 overflow-auto">
+          <div className="scrollbar-none sticky top-28 overflow-auto">
             <Selection
               from={steps.map((step) => (
                 <CodeMobile
diff --git a/docs/suspensive.org/src/styles/globals.css b/docs/suspensive.org/src/styles/globals.css
index b5c61c956..321d0d642 100644
--- a/docs/suspensive.org/src/styles/globals.css
+++ b/docs/suspensive.org/src/styles/globals.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.scrollbar-none {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera*/
+}