From d4fe88484870ea76e90b300be51e338aad3e3b32 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 15:25:57 +0000
Subject: [PATCH] feat: add scrollbar-hide utility for spell tabs horizontal
 scroll

- Add scrollbar-hide utility class in index.css
- Hide scrollbars on TabsList for profile, event, and relay viewers
- Maintains horizontal scroll functionality without visible scrollbar
- Works across all browsers (Chrome, Firefox, Safari, IE/Edge)
---
 src/components/EventDetailViewer.tsx |  2 +-
 src/components/ProfileViewer.tsx     |  2 +-
 src/components/RelayViewer.tsx       |  2 +-
 src/index.css                        | 12 ++++++++++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/EventDetailViewer.tsx b/src/components/EventDetailViewer.tsx
index 43c3a70..786aeb7 100644
--- a/src/components/EventDetailViewer.tsx
+++ b/src/components/EventDetailViewer.tsx
@@ -386,7 +386,7 @@ export function EventDetailViewer({ pointer }: EventDetailViewerProps) {
             defaultValue={eventSpells[0]?.id}
             className="flex flex-col h-full"
           >
-            <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0 h-auto flex-shrink-0 overflow-x-auto overflow-y-hidden">
+            <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0 h-auto flex-shrink-0 overflow-x-auto overflow-y-hidden scrollbar-hide">
               {eventSpells.map((spell) => {
                 // Extract kinds from spell for display
                 const spellKinds = (() => {
diff --git a/src/components/ProfileViewer.tsx b/src/components/ProfileViewer.tsx
index e8f4707..40b2b5b 100644
--- a/src/components/ProfileViewer.tsx
+++ b/src/components/ProfileViewer.tsx
@@ -714,7 +714,7 @@ export function ProfileViewer({ pubkey }: ProfileViewerProps) {
             defaultValue={pubkeySpells[0]?.id}
             className="flex flex-col h-full"
           >
-            <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0 h-auto flex-shrink-0 overflow-x-auto overflow-y-hidden">
+            <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0 h-auto flex-shrink-0 overflow-x-auto overflow-y-hidden scrollbar-hide">
               {pubkeySpells.map((spell) => {
                 // Extract kinds from spell for display
                 const spellKinds = (() => {
diff --git a/src/components/RelayViewer.tsx b/src/components/RelayViewer.tsx
index 6b2b5e1..ea627c7 100644
--- a/src/components/RelayViewer.tsx
+++ b/src/components/RelayViewer.tsx
@@ -315,7 +315,7 @@ export function RelayViewer({ url }: RelayViewerProps) {
             defaultValue={relaySpells[0]?.id}
             className="flex flex-col h-full"
           >
-            <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0 h-auto flex-shrink-0 overflow-x-auto overflow-y-hidden">
+            <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0 h-auto flex-shrink-0 overflow-x-auto overflow-y-hidden scrollbar-hide">
               {relaySpells.map((spell) => {
                 // Extract kinds from spell for display
                 const spellKinds = (() => {
diff --git a/src/index.css b/src/index.css
index 611f2c8..ea86ae4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,18 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  /* Hide scrollbar while maintaining scroll functionality */
+  .scrollbar-hide {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+}
+
 /* Custom scrollbar styling - uses theme variables */
 * {
   scrollbar-width: thin;