content: Fix ordered list layout to handle long numbers in <ol>

Fixes: #1356

Author: lakshya1goel

lib/widgets/content.dart

@@ -503,33 +503,24 @@ class ListNodeWidget extends StatelessWidget {
         case UnorderedListNode(): marker = "•   "; break;
         case OrderedListNode(:final start): marker = "${start + index}. "; break;
       }
-      return ListItemWidget(marker: marker, nodes: item);
+      return TableRow(children: [
+        Align(
+          alignment: AlignmentDirectional.topEnd,
+          child: Text(marker)),
+        BlockContentList(nodes: item),
+      ]);
     });
+
     return Padding(
       padding: const EdgeInsets.only(top: 2, bottom: 5),
-      child: Column(children: items));
-  }
-}
-
-class ListItemWidget extends StatelessWidget {
-  const ListItemWidget({super.key, required this.marker, required this.nodes});
-
-  final String marker;
-  final List<BlockContentNode> nodes;
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.start,
-      crossAxisAlignment: CrossAxisAlignment.baseline,
-      textBaseline: localizedTextBaseline(context),
-      children: [
-        SizedBox(
-          width: 20, // TODO handle long numbers in <ol>, like https://github.com/zulip/zulip/pull/25063
-          child: Align(
-            alignment: AlignmentDirectional.topEnd, child: Text(marker))),
-        Expanded(child: BlockContentList(nodes: nodes)),
-      ]);
+      child: Table(
+        defaultVerticalAlignment: TableCellVerticalAlignment.baseline,
+        textBaseline: localizedTextBaseline(context),
+        columnWidths: const <int, TableColumnWidth>{
+          0: IntrinsicColumnWidth(),
+          1: FlexColumnWidth(),
+        },
+        children: items));
   }
 }
 

test/widgets/content_test.dart

@@ -239,6 +239,33 @@ void main() {
       expect(find.text('third'), findsOneWidget);
       expect(find.text('fourth'), findsOneWidget);
     });
+
+    testWidgets('list uses correct text baseline alignment', (tester) async {
+      await prepareContent(tester, plainContent(ContentExample.orderedListLargeStart.html));
+
+      final table = tester.widget<Table>(find.byType(Table));
+      check(table.defaultVerticalAlignment).equals(TableCellVerticalAlignment.baseline);
+      check(table.textBaseline).equals(localizedTextBaseline(tester.element(find.byType(Table))));
+    });
+
+    testWidgets('ordered list markers have enough space to render completely', (tester) async {
+      await prepareContent(tester, plainContent(ContentExample.orderedListLargeStart.html));
+
+      final renderParagraph = tester.renderObject(find.textContaining('9999.')) as RenderParagraph;
+      final textHeight = renderParagraph.size.height;
+      final lineHeight = renderParagraph.text.style!.height! * renderParagraph.text.style!.fontSize!;
+      check(textHeight).equals(lineHeight);
+      check(renderParagraph.didExceedMaxLines).isFalse();
+    });
+
+    testWidgets('ordered list markers are end-aligned', (tester) async {
+      await prepareContent(tester, plainContent(ContentExample.orderedListLargeStart.html));
+
+      final marker9999 = tester.getRect(find.textContaining('9999.'));
+      final marker10000 = tester.getRect(find.textContaining('10000.'));
+      check(marker9999.width != marker10000.width).isTrue();
+      check(marker9999.right).equals(marker10000.right);
+    });
   });
 
   group('Spoiler', () {