From f645a8669925a9a4655a996ee7d7526c056aa3c7 Mon Sep 17 00:00:00 2001
From: SaraVieira <hey@iamsaravieira.com>
Date: Sun, 10 Aug 2025 13:56:59 +0100
Subject: [PATCH 1/2] make margin left based on number in ol

---
 .../MemoContent/OrderedListItem.tsx           | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/web/src/components/MemoContent/OrderedListItem.tsx b/web/src/components/MemoContent/OrderedListItem.tsx
index f6666a35ecebf..88270ee9dc1f7 100644
--- a/web/src/components/MemoContent/OrderedListItem.tsx
+++ b/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>
-      {children.map((child, index) => (
-        <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
-      ))}
+    <li style={ml}>
+      {children.map((child, index) => {
+        return <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />;
+      })}
     </li>
   );
 };

From 45475021147134dd12d9032af51849b9ccb2051c Mon Sep 17 00:00:00 2001
From: SaraVieira <hey@iamsaravieira.com>
Date: Sun, 10 Aug 2025 14:00:59 +0100
Subject: [PATCH 2/2] remove return

---
 web/src/components/MemoContent/OrderedListItem.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/MemoContent/OrderedListItem.tsx b/web/src/components/MemoContent/OrderedListItem.tsx
index 88270ee9dc1f7..2f9f377ff84ae 100644
--- a/web/src/components/MemoContent/OrderedListItem.tsx
+++ b/web/src/components/MemoContent/OrderedListItem.tsx
@@ -22,9 +22,9 @@ const OrderedListItem: React.FC<Props> = ({ children, number }: Props) => {
 
   return (
     <li style={ml}>
-      {children.map((child, index) => {
-        return <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />;
-      })}
+      {children.map((child, index) => (
+        <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
+      ))}
     </li>
   );
 };