ensure custom emojis are visible

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "imwald",
-  "version": "23.17.2",
+  "version": "23.17.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "imwald",
-      "version": "23.17.2",
+      "version": "23.17.3",
       "license": "MIT",
       "dependencies": {
         "@asciidoctor/core": "^3.0.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "imwald",
-  "version": "23.17.2",
+  "version": "23.17.3",
   "description": "Imwald — a user-friendly Nostr client focused on relay feed browsing, publications, and relay discovery",
   "private": true,
   "type": "module",

src/components/EmojiPicker/index.tsx

@@ -134,8 +134,30 @@ export default function EmojiPicker({
 
   const reactionsList = reactions ?? [...DEFAULT_SUGGESTED_EMOJIS]
 
+  const ownEmojisRow =
+    ownEmojis.length > 0 ? (
+      <div className="flex shrink-0 items-center gap-0.5 px-1 py-1 border-b overflow-x-auto scrollbar-hide">
+        {ownEmojis.map((emoji) => (
+          <button
+            key={emoji.shortcode}
+            type="button"
+            title={`:${emoji.shortcode}:`}
+            className="shrink-0 w-8 h-8 rounded hover:bg-muted flex items-center justify-center"
+            onClick={(e) => {
+              recordEmojiUsed(emoji)
+              onEmojiClick(emoji, e.nativeEvent)
+            }}
+          >
+            <img src={emoji.url} alt={emoji.shortcode} className="w-6 h-6 object-contain" />
+          </button>
+        ))}
+      </div>
+    ) : null
+
   if (mode === 'reactions') {
     return (
+      <div className="flex w-full min-w-0 flex-col">
+        {ownEmojisRow}
         <div className="flex flex-wrap items-center gap-1 p-2">
         {reactionsList.map((emoji) => (
           <button
@@ -159,30 +181,14 @@ export default function EmojiPicker({
           <Plus size={20} />
         </button>
         </div>
+      </div>
     )
   }
 
   return (
-    <div className="w-full flex flex-col">
+    <div className="flex w-full min-w-0 flex-col">
-      {ownEmojis.length > 0 && (
+      {ownEmojisRow}
-        <div className="flex items-center gap-0.5 px-1 py-1 border-b overflow-x-auto scrollbar-hide">
+      <div ref={containerRef} className="min-h-0 w-full flex-1 overflow-hidden" />
-          {ownEmojis.map((emoji) => (
-            <button
-              key={emoji.shortcode}
-              type="button"
-              title={`:${emoji.shortcode}:`}
-              className="shrink-0 w-8 h-8 rounded hover:bg-muted flex items-center justify-center"
-              onClick={(e) => {
-                recordEmojiUsed(emoji)
-                onEmojiClick(emoji, e.nativeEvent)
-              }}
-            >
-              <img src={emoji.url} alt={emoji.shortcode} className="w-6 h-6 object-contain" />
-            </button>
-          ))}
-        </div>
-      )}
-      <div ref={containerRef} />
     </div>
   )
 }

src/components/EmojiPickerDialog/index.tsx

@@ -39,7 +39,8 @@ export default function EmojiPickerDialog({
           <DrawerHeader className="sr-only">
             <DrawerTitle>Emoji Picker</DrawerTitle>
           </DrawerHeader>
-          <div className="flex w-full max-w-[100vw] min-w-0 min-h-0 shrink flex-col items-stretch overflow-x-hidden pb-1">
+          <div className="flex w-full max-w-[100vw] min-w-0 min-h-0 max-h-[min(72dvh,calc(100dvh-6rem))] flex-col overflow-hidden pb-1">
+            {open ? (
               <EmojiPicker
                 onEmojiClick={(emoji, e) => {
                   e.stopPropagation()
@@ -47,6 +48,7 @@ export default function EmojiPickerDialog({
                   onEmojiClick?.(emoji)
                 }}
               />
+            ) : null}
           </div>
         </DrawerContent>
       </Drawer>

src/components/NoteStats/LikeButton.tsx

@@ -340,6 +340,7 @@ export function LikeButtonWithStats({
         <Drawer handleOnly open={isEmojiReactionsOpen} onOpenChange={setIsEmojiReactionsOpen}>
           <DrawerContent
             dragHandle="vaul"
+            className="max-h-[min(88dvh,calc(100dvh-5rem))]"
             onPointerDownOutside={(e) => {
               const t = e.target as HTMLElement | null
               if (t?.closest?.('[data-vaul-overlay]')) return
@@ -349,7 +350,9 @@ export function LikeButtonWithStats({
             <DrawerHeader className="sr-only">
               <DrawerTitle>React</DrawerTitle>
             </DrawerHeader>
-            {likeEmojiPicker}
+            <div className="flex min-h-0 w-full max-h-[min(72dvh,calc(100dvh-6rem))] flex-col overflow-hidden px-1 pb-1">
+              {isEmojiReactionsOpen ? likeEmojiPicker : null}
+            </div>
           </DrawerContent>
         </Drawer>
       </>