diff --git a/src/components/EmojiPickerDialog/index.tsx b/src/components/EmojiPickerDialog/index.tsx
index 29ec71e0..8766b5ae 100644
--- a/src/components/EmojiPickerDialog/index.tsx
+++ b/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) => {
diff --git a/src/components/GifPicker/index.tsx b/src/components/GifPicker/index.tsx
index 82f13e71..1460ae0f 100644
--- a/src/components/GifPicker/index.tsx
+++ b/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>
diff --git a/src/components/NoteStats/LikeButton.tsx b/src/components/NoteStats/LikeButton.tsx
index 8c855fb5..1693e726 100644
--- a/src/components/NoteStats/LikeButton.tsx
+++ b/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
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 15609a15..e1d5b3e2 100644
--- a/src/components/ui/drawer.tsx
+++ b/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>