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

Fixes: #1356

Author: lakshya1goel

lib/widgets/content.dart

@@ -493,33 +493,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,38 @@ 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('long ordered list markers render completely and are right-aligned', (tester) async {
+      await prepareContent(tester, plainContent(ContentExample.orderedListLargeStart.html));
+
+      final markerTexts = tester.widgetList<Text>(
+        find.descendant(of: find.byType(Align), matching: find.byType(Text)));
+        
+      for (final text in markerTexts) {
+        final renderParagraph = tester.renderObject(find.text(text.data!)) as RenderParagraph;
+        final textHeight = renderParagraph.size.height;
+        final lineHeight = renderParagraph.text.style!.height! * renderParagraph.text.style!.fontSize!;
+        check(textHeight).equals(lineHeight);
+
+        final textWidth = renderParagraph.size.width;
+        final renderBox = tester.renderObject(find.ancestor(
+            of: find.text(text.data!),
+            matching: find.byType(Align))) as RenderBox;
+        check(renderBox.size.width >= textWidth).isTrue();
+
+        final align = tester.widget<Align>(
+          find.ancestor(of: find.text(text.data!), matching: find.byType(Align)));
+        check(align.alignment).equals(AlignmentDirectional.topEnd);
+      }
+    });
   });
 
   group('Spoiler', () {