emoji: Ensure consistent height for text-only emoji items.

Text-only emoji list items in the emoji picker and autocomplete
views had incorrect row heights, causing visual inconsistencies. This
was due to the placeholder  not correctly accounting for
the vertical padding applied by its parent widget, making text-only
rows taller than rows with image emoji.

This commit fixes the issue by calculating the precise height needed
for the placeholder  to offset the parent padding. This
ensures the final rendered height is identical for all emoji types.
The change is applied in both  and
 for consistency.

Fixes #1587.

Author: loveucifer

lib/widgets/autocomplete.dart

@@ -344,12 +344,13 @@ class _EmojiAutocompleteItem extends StatelessWidget {
 
     // TODO deduplicate this logic with [EmojiPickerListEntry]
     final emojiDisplay = candidate.emojiDisplay.resolve(store.userSettings);
-    final Widget? glyph = switch (emojiDisplay) {
+    final Widget glyph = switch (emojiDisplay) {
       ImageEmojiDisplay() =>
         ImageEmojiWidget(size: _size, emojiDisplay: emojiDisplay),
       UnicodeEmojiDisplay() =>
         UnicodeEmojiWidget(size: _size, emojiDisplay: emojiDisplay),
-      TextEmojiDisplay() => null, // The text is already shown separately.
+        // The text is already shown; just put a placeholder here to set the row height.
+      TextEmojiDisplay() => const SizedBox(height: _size),
     };
 
     final label = candidate.aliases.isEmpty
@@ -367,11 +368,9 @@ class _EmojiAutocompleteItem extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
       child: Row(children: [
-        if (glyph != null) ...[
-          Padding(padding: const EdgeInsets.all(6),
-            child: glyph),
-          const SizedBox(width: 6),
-        ],
+        Padding(padding: const EdgeInsets.all(6),
+          child: glyph),
+        const SizedBox(width: 6),
         Expanded(
           child: Text(
             style: TextStyle(fontSize: 17, height: 18 / 17,

lib/widgets/emoji_reaction.dart

@@ -558,12 +558,12 @@ class EmojiPickerListEntry extends StatelessWidget {
 
     // TODO deduplicate this logic with [_EmojiAutocompleteItem]
     final emojiDisplay = emoji.emojiDisplay.resolve(store.userSettings);
-    final Widget? glyph = switch (emojiDisplay) {
+    final Widget glyph = switch (emojiDisplay) {
       ImageEmojiDisplay() =>
         ImageEmojiWidget(size: _emojiSize, emojiDisplay: emojiDisplay),
       UnicodeEmojiDisplay() =>
         UnicodeEmojiWidget(size: _emojiSize, emojiDisplay: emojiDisplay),
-      TextEmojiDisplay() => null, // The text is already shown separately.
+      TextEmojiDisplay() => const SizedBox(height: 20.0),
     };
 
     final label = emoji.aliases.isEmpty
@@ -580,8 +580,7 @@ class EmojiPickerListEntry extends StatelessWidget {
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 8),
         child: Row(spacing: 4, children: [
-          if (glyph != null)
-            Padding(
+          Padding(
               padding: const EdgeInsets.all(10),
               child: glyph),
           Flexible(child: Text(label,

pubspec.lock

@@ -1079,26 +1079,26 @@ packages:
     dependency: "direct dev"
     description:
       name: test
-      sha256: "65e29d831719be0591f7b3b1a32a3cda258ec98c58c7b25f7b84241bc31215bb"
+      sha256: "75906bf273541b676716d1ca7627a17e4c4070a3a16272b7a3dc7da3b9f3f6b7"
       url: "https://pub.dev"
     source: hosted
-    version: "1.26.2"
+    version: "1.26.3"
   test_api:
     dependency: "direct dev"
     description:
       name: test_api
-      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
+      sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.6"
+    version: "0.7.7"
   test_core:
     dependency: transitive
     description:
       name: test_core
-      sha256: "80bf5a02b60af04b09e14f6fe68b921aad119493e26e490deaca5993fef1b05a"
+      sha256: "0cc24b5ff94b38d2ae73e1eb43cc302b77964fbf67abad1e296025b78deb53d0"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.11"
+    version: "0.6.12"
   timing:
     dependency: transitive
     description:

test/widgets/autocomplete_test.dart

@@ -372,6 +372,42 @@ void main() {
       expected ? displaySubject.findsOne(): displaySubject.findsNothing();
     }
 
+   testWidgets('text emoji autocomplete item must have correct height', (tester) async {
+      // Regression test for #1587
+      final composeInputFinder = await setupToComposeInput(tester);
+
+      await store.handleEvent(RealmEmojiUpdateEvent(id: 1, realmEmoji: {
+        '1': eg.realmEmojiItem(emojiCode: '1', emojiName: 'an_image_emoji'),
+      }));
+      await tester.pump();
+
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await tester.enterText(composeInputFinder, ':an_imag');
+      await tester.enterText(composeInputFinder, ':an_image');
+      await tester.pumpAndSettle();
+
+      final imageItemFinder = find.widgetWithText(InkWell, 'an_image_emoji');
+      check(imageItemFinder).findsOne();
+      final imageItemHeight = tester.getSize(imageItemFinder).height;
+
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await store.handleEvent(UserSettingsUpdateEvent(id: 1,
+        property: UserSettingName.emojiset,
+        value: Emojiset.text));
+
+      await tester.enterText(composeInputFinder, ':an_imag');
+      await tester.enterText(composeInputFinder, ':an_image');
+      await tester.pumpAndSettle();
+
+      final textItemFinder = find.widgetWithText(InkWell, 'an_image_emoji');
+      check(textItemFinder).findsOne();
+      final textItemHeight = tester.getSize(textItemFinder).height;
+
+      check(textItemHeight).isCloseTo(imageItemHeight, 1.0);
+
+      debugNetworkImageHttpClientProvider = null;
+    });
+
     testWidgets('show, update, choose', (tester) async {
       final composeInputFinder = await setupToComposeInput(tester);
       final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);

test/widgets/emoji_reaction_test.dart

@@ -556,6 +556,32 @@ void main() {
         debugNetworkImageHttpClientProvider = null;
       });
 
+      testWidgets('text emoji list items must have correct height', (tester) async {
+        // Regression test for #1587.
+        final message = eg.streamMessage();
+        await setupEmojiPicker(tester, message: message, narrow: TopicNarrow.ofMessage(message));
+
+        // Find a list entry and get its height with the default image-based emoji.
+        final listEntryFinder = find.byWidgetPredicate(
+          (w) => w is EmojiPickerListEntry && w.emoji.emojiName == 'zzz');
+        await tester.ensureVisible(listEntryFinder);
+        final imageRenderBox = tester.renderObject<RenderBox>(listEntryFinder);
+        final imageHeight = imageRenderBox.size.height;
+
+        // Change the setting to text-only emoji.
+        await store.handleEvent(UserSettingsUpdateEvent(id: 1,
+          property: UserSettingName.emojiset,
+          value: Emojiset.text));
+        await tester.pumpAndSettle();
+
+        // Find the same list entry again and check that its height has not changed.
+        await tester.ensureVisible(listEntryFinder);
+        final textRenderBox = tester.renderObject<RenderBox>(listEntryFinder);
+        check(textRenderBox.size.height).isCloseTo(imageHeight, 1.0);
+
+        debugNetworkImageHttpClientProvider = null;
+      });
+
       testWidgets('with bottom view padding', (tester) async {
         await prepare(tester, viewPadding: FakeViewPadding(bottom: 10));