From 589622043c49b99aca421fe253f7e0a25e58a361 Mon Sep 17 00:00:00 2001
From: doodlewind <7312949+doodlewind@users.noreply.github.com>
Date: Wed, 26 Feb 2025 12:09:00 +0000
Subject: [PATCH] fix(editor): list toggle position offset (#10448)

Before:

![image](https://github.com/user-attachments/assets/fbddc396-1078-4c1e-8e2c-c26c6e4a6d61)

After:

<img width="579" alt="image" src="https://github.com/user-attachments/assets/7b049b53-269b-484e-ba76-fa6f46a2004c" />

This centering approach won't affect heading blocks:

<img width="267" alt="image" src="https://github.com/user-attachments/assets/3f3217e3-7e23-43fc-a7e5-33b6eadccc88" />
---
 .../affine/components/src/toggle-button/toggle-button.ts    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/blocksuite/affine/components/src/toggle-button/toggle-button.ts b/blocksuite/affine/components/src/toggle-button/toggle-button.ts
index 3ddd1be0f..12c6bd1b9 100644
--- a/blocksuite/affine/components/src/toggle-button/toggle-button.ts
+++ b/blocksuite/affine/components/src/toggle-button/toggle-button.ts
@@ -13,8 +13,11 @@ export class ToggleButton extends WithDisposable(ShadowlessElement) {
     .toggle-icon {
       display: flex;
       align-items: start;
-      margin-top: 0.45em;
+      justify-content: start;
       position: absolute;
+      width: 16px;
+      height: 16px;
+      top: calc((1em - 16px) / 2 + 5px);
       left: 0;
       transform: translateX(-100%);
       border-radius: 4px;
@@ -22,6 +25,7 @@ export class ToggleButton extends WithDisposable(ShadowlessElement) {
       opacity: 0;
       transition: opacity 0.2s ease-in-out;
     }
+
     .toggle-icon:hover {
       background: var(--affine-hover-color);
     }