Hide visible scrollbar on mobile for a clean, app-like feel

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 <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-09-03 14:49:43 +07:00
parent 135fbaab40
commit 5a0e6d21a0

View file

@ -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); }