From d9b3e33b6ec1776f93088a4a48a91dbf9d8f862f Mon Sep 17 00:00:00 2001 From: Nicholai Date: Wed, 4 Feb 2026 16:13:57 -0700 Subject: [PATCH] fix(mobile): fix sidebar close button and scrollbar (#20) Show the Sheet close button with sidebar-matching colors instead of hiding it, and hide the native scrollbar on mobile via data-attribute scoped CSS. Co-authored-by: Nicholai --- src/app/globals.css | 7 +++++++ src/components/ui/sidebar.tsx | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/globals.css b/src/app/globals.css index 9a3aba6..4d3843a 100755 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -195,4 +195,11 @@ body { @apply bg-background text-foreground; } +} + +[data-mobile="true"] [data-sidebar="content"] { + scrollbar-width: none; +} +[data-mobile="true"] [data-sidebar="content"]::-webkit-scrollbar { + display: none; } \ No newline at end of file diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx index 30638ac..7fb31e8 100755 --- a/src/components/ui/sidebar.tsx +++ b/src/components/ui/sidebar.tsx @@ -187,7 +187,7 @@ function Sidebar({ data-sidebar="sidebar" data-slot="sidebar" data-mobile="true" - className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden" + className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:text-sidebar-foreground [&>button]:opacity-80 [&>button]:hover:opacity-100" style={ { "--sidebar-width": SIDEBAR_WIDTH_MOBILE,