From 3eaf92aaa0d52e67de9693cf5409b8dcabcfa4c4 Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Mon, 8 Dec 2025 22:47:07 +0100
Subject: [PATCH] fix reply relaylist scroll bars

---
 src/components/PostEditor/PostRelaySelector.tsx | 9 +++++----
 src/components/ui/scroll-area.tsx               | 1 +
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/PostEditor/PostRelaySelector.tsx b/src/components/PostEditor/PostRelaySelector.tsx
index f6e920d..eda3b31 100644
--- a/src/components/PostEditor/PostRelaySelector.tsx
+++ b/src/components/PostEditor/PostRelaySelector.tsx
@@ -15,6 +15,7 @@ import relaySelectionService from '@/services/relay-selection.service'
 import { Button } from '@/components/ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import logger from '@/lib/logger'
 
 export default function PostRelaySelector({
@@ -379,9 +380,9 @@ export default function PostRelaySelector({
                   <span className="text-sm text-muted-foreground truncate">{description}</span>
                 </div>
               </div>
-              <div className="flex-1 overflow-y-auto p-4">
+              <ScrollArea className="flex-1 p-4">
                 {content}
-              </div>
+              </ScrollArea>
             </div>
           </SheetContent>
         </Sheet>
@@ -411,9 +412,9 @@ export default function PostRelaySelector({
             <span className="text-sm font-medium">{t('Select relays')}</span>
             <span className="text-xs text-muted-foreground truncate ml-2">{description}</span>
           </div>
-          <div className="p-3 overflow-y-auto overscroll-contain touch-pan-y max-h-[30vh] -webkit-overflow-scrolling-touch">
+          <ScrollArea className="p-3 max-h-[30vh]">
             {content}
-          </div>
+          </ScrollArea>
         </PopoverContent>
       </Popover>
     </div>
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 79040a0..dae7011 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -26,6 +26,7 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       'flex touch-none select-none transition-colors',
+      'data-[state=hidden]:opacity-0 data-[state=hidden]:pointer-events-none data-[state=hidden]:hidden',
       orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
       orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
       className