From e8690e34198bfbcedc05d357de6559c5ba5c935a Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Wed, 14 Jan 2026 11:48:04 +0500
Subject: [PATCH] web: fix toc headings alignment (#9143)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
---
 .../components/editor/table-of-contents.tsx   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/editor/table-of-contents.tsx b/apps/web/src/components/editor/table-of-contents.tsx
index 6895987f0..d1ceaae2a 100644
--- a/apps/web/src/components/editor/table-of-contents.tsx
+++ b/apps/web/src/components/editor/table-of-contents.tsx
@@ -201,7 +201,14 @@ function TableOfContents(props: TableOfContentsProps) {
                     {item.hasChildren ? (
                       <Button
                         variant="secondary"
-                        sx={{ bg: "transparent", p: 0, borderRadius: 100 }}
+                        sx={{
+                          bg: "transparent",
+                          p: 0,
+                          borderRadius: 100,
+                          width: 14,
+                          height: 14,
+                          flexShrink: 0
+                        }}
                         onClick={(e) => {
                           e.stopPropagation();
                           expanded ? collapse() : expand();
@@ -214,7 +221,17 @@ function TableOfContents(props: TableOfContentsProps) {
                         )}
                       </Button>
                     ) : (
-                      <Circle size={5} color="icon-secondary" />
+                      <Flex
+                        sx={{
+                          width: 14,
+                          height: 14,
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0
+                        }}
+                      >
+                        <Circle size={5} color="icon-secondary" />
+                      </Flex>
                     )}
                     {item.data.title}
                   </Button>