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,7 +53,6 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
         </FeedSwitcherItem>
       )}
 
-      <div className="space-y-2">
       <div className="flex justify-end items-center text-sm">
         <SecondaryPageLink
           to={toRelaySettings()}
@@ -93,7 +92,6 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
         </FeedSwitcherItem>
       ))}
     </div>
-    </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>