content: Handle long numbers in <ol>

Author: lakshya1goel

lib/widgets/content.dart

@@ -479,7 +479,7 @@ class ListNodeWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // TODO(#162): p+ul and p+ol interactions
-    final items = List.generate(node.items.length, (index) {
+    final items = List<TableRow>.generate(node.items.length, (index) {
       final item = node.items[index];
       String marker;
       switch (node) {
@@ -493,34 +493,37 @@ class ListNodeWidget extends StatelessWidget {
         case UnorderedListNode(): marker = "•   "; break;
         case OrderedListNode(:final start): marker = "${start + index}. "; break;
       }
-      return ListItemWidget(marker: marker, nodes: item);
+      return buildListItemRow(context: context, marker: marker, nodes: item);
     });
     return Padding(
       padding: const EdgeInsets.only(top: 2, bottom: 5),
-      child: Column(children: items));
+      child: Table(
+        textBaseline: localizedTextBaseline(context),
+        defaultVerticalAlignment: TableCellVerticalAlignment.baseline,
+        columnWidths: const <int, TableColumnWidth>{
+          0: IntrinsicColumnWidth(),
+          1: FlexColumnWidth(),
+        },
+        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)),
-      ]);
-  }
+TableRow buildListItemRow({
+  required BuildContext context,
+  required String marker,
+  required List<BlockContentNode> nodes,
+}) {
+  return TableRow(
+    children: [
+      Align(
+        alignment: AlignmentDirectional.topEnd,
+        child: Text(marker, textAlign: TextAlign.right),
+      ),
+      BlockContentList(nodes: nodes),
+    ],
+  );
 }
 
 class Spoiler extends StatefulWidget {