emoji: Ensure consistency in the row height for text

earlier, text-only emoji in the picker and autocomplete lists used a Text widget. This caused inconsistent row heights

This pr change replaces the Text placeholder with a simple SizedBox.square, which gives a fixed-size empty space. this therefore ensures the height of text-only items perfectly matches items with image emojis.

Adds regression tests for both EmojiPickerListEntry and _EmojiAutocompleteItem to verify the consistent height .

Fixes #1587.

Author: loveucifer

lib/widgets/autocomplete.dart

@@ -342,14 +342,15 @@ class _EmojiAutocompleteItem extends StatelessWidget {
     final designVariables = DesignVariables.of(context);
     final candidate = option.candidate;
 
-    // TODO deduplicate this logic with [EmojiPickerListEntry]
+    // This logic is now corrected to match EmojiPickerListEntry as per todo
     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.
+      // Use a simple SizedBox for a perfect, non-scaling placeholder.
+      TextEmojiDisplay() => const SizedBox.square(dimension: _size),
     };
 
     final label = candidate.aliases.isEmpty
@@ -367,11 +368,10 @@ 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),
-        ],
+        // The `if (glyph != null)` check is removed, as the glyph is always present.
+        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

@@ -577,12 +577,13 @@ 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() => Text(' ',
+        style: TextStyle(fontSize: _emojiSize), textScaler: TextScaler.noScaling),
     };
 
     final label = emoji.aliases.isEmpty
@@ -601,7 +602,7 @@ class EmojiPickerListEntry extends StatelessWidget {
         child: Row(spacing: 4, children: [
           Padding(
               padding: const EdgeInsets.all(10),
-              child: glyph ?? SizedBox(width: _emojiSize, height: _emojiSize)),
+              child: glyph),
           Flexible(child: Text(label,
             maxLines: 2,
             overflow: TextOverflow.ellipsis,

test/widgets/autocomplete_test.dart

@@ -372,6 +372,56 @@ void main() {
       expected ? displaySubject.findsOne(): displaySubject.findsNothing();
     }
 
+    testWidgets('text emoji autocomplete item must have correct height', (tester) async {
+      // Regression test for #1587
+      tester.platformDispatcher.textScaleFactorTestValue = 2.0;
+      addTearDown(tester.platformDispatcher.clearTextScaleFactorTestValue);
+
+      final composeInputFinder = await setupToComposeInput(tester);
+
+      // Set up a realm emoji so we have a reliable image emoji to test against.
+      await store.handleEvent(RealmEmojiUpdateEvent(id: 1, realmEmoji: {
+        '1': eg.realmEmojiItem(emojiCode: '1', emojiName: 'an_image_emoji'),
+      }));
+      await tester.pumpAndSettle(); // Ensure store update is fully processed.
+
+      // Phase 1: Get the height of the item when it has an image.
+      // This two-step `enterText` call is a more reliable way to trigger the autocomplete view.
+      await tester.enterText(composeInputFinder, ':an_imag');
+      await tester.enterText(composeInputFinder, ':an_image');
+      await tester.pumpAndSettle();
+
+      final imageItemFinder = find.ancestor(
+        of: find.text('an_image_emoji'),
+        matching: find.byType(InkWell),
+      );
+      check(imageItemFinder).findsOne();
+      final imageItemHeight = tester.getSize(imageItemFinder).height;
+
+      // Phase 2: Change the setting to render the same item as text-only.
+      await store.handleEvent(UserSettingsUpdateEvent(id: 1,
+        property: UserSettingName.emojiset,
+        value: Emojiset.text));
+
+      // Re-trigger autocomplete to have it rebuild with the new setting.
+      await tester.enterText(composeInputFinder, ':an_imag');
+      await tester.enterText(composeInputFinder, ':an_image');
+      await tester.pumpAndSettle();
+
+      // Find the same item, now rendered as a text-only item with a placeholder.
+      final textItemFinder = find.ancestor(
+        of: find.text('an_image_emoji'),
+        matching: find.byType(InkWell),
+      );
+      check(textItemFinder).findsOne();
+      final textItemHeight = tester.getSize(textItemFinder).height;
+
+      // Phase 3: Assert the heights are consistent.
+      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,43 @@ void main() {
         debugNetworkImageHttpClientProvider = null;
       });
 
+      testWidgets('text emoji list items must have correct height', (tester) async {
+      // Regression test for #1587
+      tester.platformDispatcher.textScaleFactorTestValue = 2.0;
+      addTearDown(tester.platformDispatcher.clearTextScaleFactorTestValue);
+
+      final message = eg.streamMessage();
+      // Firstly, set up the initial emoji picker. This leaves it open.
+      await setupEmojiPicker(tester, message: message, narrow: TopicNarrow.ofMessage(message));
+
+      // and Now, change the setting to text-only emoji.
+      await store.handleEvent(UserSettingsUpdateEvent(id: 1,
+        property: UserSettingName.emojiset,
+        value: Emojiset.text));
+
+      // Close the emoji picker. This also closes the underlying action sheet also.
+      Navigator.of(tester.element(find.byType(EmojiPicker))).pop();
+      await tester.pumpAndSettle(); // Let dismiss animations finish.
+
+      // We are now back at the message list. Let's start over to see the setting change.
+      // now we Long-press the message to open the action sheet again.
+      await tester.longPress(find.byType(MessageContent));
+      await tester.pumpAndSettle();
+
+      // now we Tap the button to open the emoji picker, which will now use the new setting.
+      await tester.tap(find.byIcon(ZulipIcons.chevron_right));
+      await tester.pumpAndSettle();
+
+      // Finally, find a list entry and check its height.
+      final listEntryFinder = find.byType(EmojiPickerListEntry).first;
+      await tester.ensureVisible(listEntryFinder);
+
+      final renderBox = tester.renderObject<RenderBox>(listEntryFinder);
+      check(renderBox.size.height).isGreaterThan(48.0);
+
+      debugNetworkImageHttpClientProvider = null;
+    });
+
       testWidgets('with bottom view padding', (tester) async {
         await prepare(tester, viewPadding: FakeViewPadding(bottom: 10));