make margin left based on number in ol

web/src/components/MemoContent/OrderedListItem.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Node } from "@/types/proto/api/v1/markdown_service";
 import Renderer from "./Renderer";
 import { BaseProps } from "./types";
@@ -8,12 +9,22 @@ interface Props extends BaseProps {
   children: Node[];
 }
 
-const OrderedListItem: React.FC<Props> = ({ children }: Props) => {
+const OrderedListItem: React.FC<Props> = ({ children, number }: Props) => {
+  const ml = useMemo(
+    () =>
+      number.length > 1
+        ? {
+            marginLeft: 8 * (number.length - 1),
+          }
+        : {},
+    [number],
+  );
+
   return (
-    <li>
+    <li style={ml}>
-      {children.map((child, index) => (
+      {children.map((child, index) => {
-        <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
+        return <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />;
-      ))}
+      })}
     </li>
   );
 };