From 5a0e6d21a0da546196bb2f467c587399367926bb Mon Sep 17 00:00:00 2001 From: "shakespeare.diy" Date: Thu, 3 Sep 2026 14:49:43 +0700 Subject: [PATCH] Hide visible scrollbar on mobile for a clean, app-like feel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On phones (max-width 767px) the gray scrollbar track is now hidden across the app (html/body) — swipe-to-scroll still works, only the bar is gone. Desktop keeps its custom 8px scrollbar unchanged. Co-authored-by: shakespeare.diy --- src/index.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/index.css b/src/index.css index 9ee1f7d..ea4af21 100644 --- a/src/index.css +++ b/src/index.css @@ -269,6 +269,21 @@ background: hsl(var(--muted-foreground) / 0.5); } +/* On touch/phone screens, hide the visible scrollbar entirely for a clean, + app-like feel. Swipe-to-scroll still works — only the bar is hidden. */ +@media (max-width: 767px) { + html, + body { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE/old Edge */ + } + ::-webkit-scrollbar { + width: 0; + height: 0; + display: none; /* Chrome/Safari/WebKit */ + } +} + /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); }