feat: enable scrolling for overflowing drawer content

src/components/FeedSwitcher/index.tsx

@@ -16,7 +16,7 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
   const { feedInfo, switchFeed } = useFeed()
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-2">
       {pubkey && (
         <FeedSwitcherItem
           isActive={feedInfo.feedType === 'following'}
@@ -53,46 +53,44 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
         </FeedSwitcherItem>
       )}
 
-      <div className="space-y-2">
+      <div className="flex justify-end items-center text-sm">
-        <div className="flex justify-end items-center text-sm">
+        <SecondaryPageLink
-          <SecondaryPageLink
+          to={toRelaySettings()}
-            to={toRelaySettings()}
+          className="text-primary font-semibold"
-            className="text-primary font-semibold"
+          onClick={() => close?.()}
-            onClick={() => close?.()}
+        >
-          >
+          {t('edit')}
-            {t('edit')}
+        </SecondaryPageLink>
-          </SecondaryPageLink>
+      </div>
-        </div>
+      {relaySets
-        {relaySets
+        .filter((set) => set.relayUrls.length > 0)
-          .filter((set) => set.relayUrls.length > 0)
+        .map((set) => (
-          .map((set) => (
+          <RelaySetCard
-            <RelaySetCard
+            key={set.id}
-              key={set.id}
+            relaySet={set}
-              relaySet={set}
+            select={feedInfo.feedType === 'relays' && set.id === feedInfo.id}
-              select={feedInfo.feedType === 'relays' && set.id === feedInfo.id}
+            onSelectChange={(select) => {
-              onSelectChange={(select) => {
+              if (!select) return
-                if (!select) return
+              switchFeed('relays', { activeRelaySetId: set.id })
-                switchFeed('relays', { activeRelaySetId: set.id })
-                close?.()
-              }}
-            />
-          ))}
-        {favoriteRelays.map((relay) => (
-          <FeedSwitcherItem
-            key={relay}
-            isActive={feedInfo.feedType === 'relay' && feedInfo.id === relay}
-            onClick={() => {
-              switchFeed('relay', { relay })
               close?.()
             }}
-          >
+          />
-            <div className="flex gap-2 items-center w-full">
-              <RelayIcon url={relay} />
-              <div className="flex-1 w-0 truncate">{simplifyUrl(relay)}</div>
-            </div>
-          </FeedSwitcherItem>
         ))}
-      </div>
+      {favoriteRelays.map((relay) => (
+        <FeedSwitcherItem
+          key={relay}
+          isActive={feedInfo.feedType === 'relay' && feedInfo.id === relay}
+          onClick={() => {
+            switchFeed('relay', { relay })
+            close?.()
+          }}
+        >
+          <div className="flex gap-2 items-center w-full">
+            <RelayIcon url={relay} />
+            <div className="flex-1 w-0 truncate">{simplifyUrl(relay)}</div>
+          </div>
+        </FeedSwitcherItem>
+      ))}
     </div>
   )
 }

src/components/NoteOptions/MobileMenu.tsx

@@ -31,7 +31,7 @@ export function MobileMenu({
       {trigger}
       <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
         <DrawerOverlay onClick={closeDrawer} />
-        <DrawerContent hideOverlay className="max-h-screen">
+        <DrawerContent hideOverlay className="max-h-[80vh]">
           <div className="overflow-y-auto overscroll-contain py-2" style={{ touchAction: 'pan-y' }}>
             {!showSubMenu ? (
               menuActions.map((action, index) => {

src/components/PostEditor/PostRelaySelector.tsx

@@ -218,7 +218,14 @@ export default function PostRelaySelector({
         </div>
         <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
           <DrawerOverlay onClick={() => setIsDrawerOpen(false)} />
-          <DrawerContent hideOverlay>{content}</DrawerContent>
+          <DrawerContent className="max-h-[80vh]" hideOverlay>
+            <div
+              className="overflow-y-auto overscroll-contain py-2"
+              style={{ touchAction: 'pan-y' }}
+            >
+              {content}
+            </div>
+          </DrawerContent>
         </Drawer>
       </>
     )

src/components/ui/drawer.tsx

@@ -85,7 +85,7 @@ const DrawerContent = React.forwardRef<
       onOpenAutoFocus={(e) => e.preventDefault()}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="mx-auto mt-4 pb-2 mb-2 h-2 w-[100px] rounded-full bg-muted" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>

src/pages/primary/NoteListPage/FeedButton.tsx

@@ -20,7 +20,10 @@ export default function FeedButton({ className }: { className?: string }) {
         <FeedSwitcherTrigger className={className} onClick={() => setOpen(true)} />
         <Drawer open={open} onOpenChange={setOpen}>
           <DrawerContent className="max-h-[80vh]">
-            <div className="py-4 px-2 overflow-auto">
+            <div
+              className="overflow-y-auto overscroll-contain py-2 px-4"
+              style={{ touchAction: 'pan-y' }}
+            >
               <FeedSwitcher close={() => setOpen(false)} />
             </div>
           </DrawerContent>