Make only tabs sticky on follow pack detail page

src/components/FollowPackDetailContent.tsx

@@ -23,6 +23,7 @@ import { isEventMuted } from '@/lib/muteHelpers';
 import { useNostr } from '@nostrify/react';
 import { genUserName } from '@/lib/genUserName';
 import { VerifiedNip05Text } from '@/components/Nip05Badge';
+import { cn, STICKY_HEADER_CLASS } from '@/lib/utils';
 
 /** Parse a follow pack / starter pack event into structured data. */
 function parsePackEvent(event: NostrEvent) {
@@ -237,7 +238,7 @@ export function FollowPackDetailContent({ event }: { event: NostrEvent }) {
   }, [event, toast]);
 
   return (
-    <div>
+    <>
       {/* Hero image */}
       {image && (
         <div className="w-full overflow-hidden bg-muted border-b border-border">
@@ -334,7 +335,7 @@ export function FollowPackDetailContent({ event }: { event: NostrEvent }) {
       </div>
 
       {/* Tab bar */}
-      <div className="flex border-t border-b border-border">
+      <div className={cn(STICKY_HEADER_CLASS, 'flex border-t border-b border-border bg-background/80 backdrop-blur-md z-10')}>
         <TabButton label="Feed" active={activeTab === 'feed'} onClick={() => setActiveTab('feed')} />
         <TabButton label="Members" active={activeTab === 'members'} onClick={() => setActiveTab('members')} />
       </div>
@@ -351,7 +352,7 @@ export function FollowPackDetailContent({ event }: { event: NostrEvent }) {
           currentUserPubkey={user?.pubkey}
         />
       )}
-    </div>
+    </>
   );
 }