fix emoji picker scrollbar

src/components/EmojiPickerDialog/index.tsx

@@ -24,9 +24,10 @@ export default function EmojiPickerDialog({
 
   if (isSmallScreen) {
     return (
-      <Drawer open={open} onOpenChange={setOpen}>
+      <Drawer open={open} onOpenChange={setOpen} handleOnly>
         <DrawerTrigger asChild>{children}</DrawerTrigger>
         <DrawerContent
+          dragHandle="vaul"
           portalContainer={portalContainer}
           className="max-h-[min(88dvh,calc(100dvh-5rem))] px-2"
           onPointerDownOutside={(e) => {

src/components/GifPicker/index.tsx

@@ -538,9 +538,9 @@ export default function GifPicker({
 
   if (isSmallScreen) {
     return (
-      <Drawer open={open} onOpenChange={setOpen}>
+      <Drawer open={open} onOpenChange={setOpen} handleOnly>
         <DrawerTrigger asChild>{children}</DrawerTrigger>
-        <DrawerContent portalContainer={portalContainer}>
+        <DrawerContent dragHandle="vaul" portalContainer={portalContainer}>
           <DrawerHeader className="sr-only">
             <DrawerTitle>{t('Choose a GIF')}</DrawerTitle>
           </DrawerHeader>

src/components/NoteStats/LikeButton.tsx

@@ -276,8 +276,9 @@ export default function LikeButton({ event, hideCount = false }: { event: Event;
     return (
       <>
         {trigger}
-        <Drawer open={isEmojiReactionsOpen} onOpenChange={setIsEmojiReactionsOpen}>
+        <Drawer handleOnly open={isEmojiReactionsOpen} onOpenChange={setIsEmojiReactionsOpen}>
           <DrawerContent
+            dragHandle="vaul"
             onPointerDownOutside={(e) => {
               const t = e.target as HTMLElement | null
               if (t?.closest?.('[data-vaul-overlay]')) return

src/components/ui/drawer.tsx

@@ -72,8 +72,13 @@ const DrawerContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
     hideOverlay?: boolean
     portalContainer?: HTMLElement | null
+    /**
+     * `vaul` — use Vaul’s real handle (`data-vaul-handle`). Pair with `handleOnly` on `Drawer` so
+     * scrolling inner content (e.g. emoji grid) does not drag the sheet.
+     */
+    dragHandle?: 'decorative' | 'vaul'
   }
->(({ className, children, hideOverlay = false, portalContainer, ...props }, ref) => (
+>(({ className, children, hideOverlay = false, portalContainer, dragHandle = 'decorative', ...props }, ref) => (
   <DrawerPortal container={portalContainer}>
     {!hideOverlay && <DrawerOverlay />}
     <DrawerPrimitive.Content
@@ -88,7 +93,11 @@ const DrawerContent = React.forwardRef<
       onOpenAutoFocus={(e) => e.preventDefault()}
       {...props}
     >
-      <div className="mx-auto mt-4 pb-2 mb-2 h-2 w-[100px] rounded-full bg-muted" />
+      {dragHandle === 'vaul' ? (
+        <DrawerPrimitive.Handle className="mx-auto mt-4 mb-2" />
+      ) : (
+        <div className="mx-auto mt-4 pb-2 mb-2 h-2 w-[100px] rounded-full bg-muted" />
+      )}
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>