diff --git a/src/components/chat/EmojiPickerDialog.tsx b/src/components/chat/EmojiPickerDialog.tsx index f1693c5..ff37c6b 100644 --- a/src/components/chat/EmojiPickerDialog.tsx +++ b/src/components/chat/EmojiPickerDialog.tsx @@ -73,8 +73,8 @@ export function EmojiPickerDialog({ // Perform search when query changes useEffect(() => { const performSearch = async () => { - // Always fetch 16 emoji (2 rows of 8) for consistent height - const results = await service.search(searchQuery, { limit: 16 }); + // Always fetch 8 emoji (1 row of 8) for consistent height + const results = await service.search(searchQuery, { limit: 8 }); setSearchResults(results); }; performSearch(); @@ -85,7 +85,7 @@ export function EmojiPickerDialog({ const history = getReactionHistory(); return Object.entries(history) .sort((a, b) => b[1] - a[1]) // Sort by count descending - .slice(0, 16) // Max 2 rows + .slice(0, 8) // Max 1 row .map(([emoji]) => emoji); }, []); @@ -101,13 +101,13 @@ export function EmojiPickerDialog({ // No search query: prioritize recently used, then fill with other emoji if (frequentlyUsed.length > 0) { const recentSet = new Set(frequentlyUsed); - // Get additional emoji to fill to 16, excluding recently used + // Get additional emoji to fill to 8, excluding recently used const additional = searchResults .filter((r) => { const key = r.source === "unicode" ? r.url : `:${r.shortcode}:`; return !recentSet.has(key); }) - .slice(0, 16 - frequentlyUsed.length); + .slice(0, 8 - frequentlyUsed.length); // Combine: recently used get priority, but displayed as regular emoji const recentResults: EmojiSearchResult[] = []; @@ -125,10 +125,10 @@ export function EmojiPickerDialog({ } } - return [...recentResults, ...additional].slice(0, 16); + return [...recentResults, ...additional].slice(0, 8); } - // No history: just show top 16 emoji + // No history: just show top 8 emoji return searchResults; }, [searchQuery, searchResults, frequentlyUsed, service]); @@ -165,26 +165,32 @@ export function EmojiPickerDialog({ /> - {/* Fixed 2-row emoji grid (16 emoji) */} -
- {displayEmojis.map((result) => ( - - ))} + {/* Fixed 1-row emoji grid (8 emoji) with consistent height */} +
+ {displayEmojis.length > 0 ? ( + displayEmojis.map((result) => ( + + )) + ) : ( +
+ No emojis found +
+ )}