fix: ui fixes

components/ui/emoji-picker.tsx

@@ -127,9 +127,17 @@ export function EmojiPicker({
                   width: PANEL_WIDTH,
                   maxWidth: "calc(100vw - 1rem)",
                 }}
-                className="z-[101] rounded-xl border border-border bg-card shadow-xl p-2 animate-in fade-in-0 zoom-in-95"
+                className="z-[101] flex max-h-[min(60vh,20rem)] flex-col rounded-xl border border-border bg-card shadow-xl animate-in fade-in-0 zoom-in-95"
               >
-                <div className="max-h-60 overflow-y-auto overscroll-contain">
+                <div
+                  // min-h-0 lets this flex child shrink below its content so it
+                  // actually scrolls; stopPropagation keeps the wheel/touch from
+                  // reaching the host drawer (vaul) and being hijacked.
+                  className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2"
+                  style={{ WebkitOverflowScrolling: "touch", touchAction: "pan-y" }}
+                  onWheel={(e) => e.stopPropagation()}
+                  onTouchMove={(e) => e.stopPropagation()}
+                >
                   {EMOJI_GROUPS.map((g) => (
                     <div key={g.label} className="mb-1.5">
                       <p className="px-1 pb-0.5 pt-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">