From ef717e617cbfc18c4ac81c47700c0483ab830ce2 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Thu, 22 May 2025 03:20:49 +0000
Subject: [PATCH] fix(editor): incorrect position of code toolbar in safari and
 firefox (#12434)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-3523](https://linear.app/affine-design/issue/BS-1974/code-block-浮标歪)
This PR fixed that the position of code toolbar is incorrect in Safari. Related PR: https://github.com/toeverything/AFFiNE/pull/10579

### Chromium

![CleanShot 2025-05-22 at 10.58.02.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/fcb7a3b6-9814-47be-82a7-91ebddf4c2cd.png)

### Safari

![CleanShot 2025-05-22 at 10.58.16.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/37d5d91a-dc11-4af2-88e0-c12e965b3818.png)

### Firefox

![CleanShot 2025-05-22 at 10.58.33.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/612bfb9b-2eb4-4ba2-b9cd-2736a459445c.png)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Style**
  - Improved the appearance of code blocks by ensuring they are displayed as block-level elements.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 blocksuite/affine/blocks/code/src/styles.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/blocksuite/affine/blocks/code/src/styles.ts b/blocksuite/affine/blocks/code/src/styles.ts
index 85be45d648..3d897ee455 100644
--- a/blocksuite/affine/blocks/code/src/styles.ts
+++ b/blocksuite/affine/blocks/code/src/styles.ts
@@ -2,6 +2,10 @@ import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
 export const codeBlockStyles = css`
+  affine-code {
+    display: block;
+  }
+
   .affine-code-block-container {
     font-size: var(--affine-font-xs);
     line-height: var(--affine-line-height);