emoji: Fix picker item height scaling for text emoji.

When using the text-only emojis the emoji picker list items did not scale correctly with the system's text scale factor in the earlier pr . i think this was because the placeholder for the emoji glyph had a fixed, unscalable height, preventing the row from growing as we wanted.

This new  commit  aims to fix the issue by replacing the null placeholder with a Text widget that correctly scales, ensuring the list item's height is consistent with the users accessibility settings.

also a  regression test is added to verify this behavior.

Fixes #1587

Author: loveucifer

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() => Text(' ', style: TextStyle(fontSize: _emojiSize)),
     };
 
     final label = emoji.aliases.isEmpty
@@ -601,7 +601,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/emoji_reaction_test.dart

@@ -555,7 +555,42 @@ 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));