fix(docs): hide scrollbar in codehike

toss · Dec 15, 2024 · d41bb76 · d41bb76
1 parent 4e0c7d5
commit d41bb76
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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*/
+}