emoji: Ensure consistent row height for text-only placeholders

Previously, text-only emoji placeholders in the picker and autocomplete lists used a Text widget. This caused inconsistent row heights when the system text scale factor was high, as the placeholder's height was determined by other font metrics.

This new pr change replaces the Text placeholder with a simple SizedBox.square, which provides a fixed-size empty space ,this 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 and prevent future regressions.

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.square(dimension: _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

@@ -577,12 +577,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.square(dimension: _emojiSize),
     };
 
     final label = emoji.aliases.isEmpty
@@ -599,8 +599,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,

test/widgets/autocomplete_test.dart

@@ -372,6 +372,53 @@ 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.
+
+      // 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.ancestor(
+        of: find.text('an_image_emoji'),
+        matching: find.byType(InkWell),
+      );
+      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));
+
+      // 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();
+
+      final textItemFinder = find.ancestor(
+        of: find.text('an_image_emoji'),
+        matching: find.byType(InkWell),
+      );
+      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
+        tester.platformDispatcher.textScaleFactorTestValue = 2.0;
+        addTearDown(tester.platformDispatcher.clearTextScaleFactorTestValue);
+
+        final message = eg.streamMessage();
+        // Set up the emoji picker, which leaves it open.
+        await setupEmojiPicker(tester, message: message, narrow: TopicNarrow.ofMessage(message));
+
+        // Now, change the setting to text-only emoji.
+        await store.handleEvent(UserSettingsUpdateEvent(id: 1,
+          property: UserSettingName.emojiset,
+          value: Emojiset.text));
+        // The picker is already open and will rebuild with the new setting.
+        await tester.pumpAndSettle();
+
+        // 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).isLessThan(45.0);
+
+        debugNetworkImageHttpClientProvider = null;
+      });
+
       testWidgets('with bottom view padding', (tester) async {
         await prepare(tester, viewPadding: FakeViewPadding(bottom: 10));