From 53857c2a83ddf49f8886f5298a24506ccfa38a72 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 17:28:40 +0000
Subject: [PATCH] Improve scrolling experience by hiding all scrollbars

Hide all scrollbars globally using CSS and remove specific scrollbar styles from the SimpleCarousel component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/yexZbDm
---
 attached_assets/image_1756488439771.png   | Bin 0 -> 2082 bytes
 client/src/components/simple-carousel.tsx |   5 ++---
 client/src/index.css                      |  24 ++++++++++++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 attached_assets/image_1756488439771.png

diff --git a/attached_assets/image_1756488439771.png b/attached_assets/image_1756488439771.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa8201cf5388717fbae70ccda86672e9d3fc178c
GIT binary patch
literal 2082
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

literal 0
HcmV?d00001

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index f439383..206d33c 100644
--- a/client/src/components/simple-carousel.tsx
+++ b/client/src/components/simple-carousel.tsx
@@ -125,11 +125,10 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
         {/* Scroll container */}
         <div 
           ref={scrollContainerRef}
-          className="overflow-x-auto scrollbar-hide"
+          className="overflow-x-auto"
           style={{ 
             scrollbarWidth: 'none', 
-            msOverflowStyle: 'none',
-            WebkitScrollbar: { display: 'none' }
+            msOverflowStyle: 'none'
           }}
         >
           <div className="flex space-x-4 pb-4 w-max">
diff --git a/client/src/index.css b/client/src/index.css
index 3b895dc..242a934 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -2,6 +2,30 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Hide ALL scrollbars globally - especially for mobile */
+* {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+*::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+html, body {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
 :root {
   --background: hsl(222, 84%, 4.9%);
   --foreground: hsl(210, 40%, 98%);