From fbf676002f445a84c2437abf59318e6746e0b8cf Mon Sep 17 00:00:00 2001
From: golok727 <goooolok727@gmail.com>
Date: Fri, 28 Jun 2024 07:48:50 +0000
Subject: [PATCH] fix: code block toolbar z-index issue in right sidebar
 (#7376)

Closes: [BS-549](https://linear.app/affine-design/issue/BS-549/code-block-%E5%9C%A8%E5%8F%B3%E4%BE%A7%E8%BE%B9%E6%A0%8F%E6%9C%89-z-index-%E9%97%AE%E9%A2%98%E8%AF%AD%E8%A8%80%E7%9A%84%E4%BF%A1%E6%81%AF%E5%87%BA%E7%8E%B0%E5%9C%A8%E4%BA%86-tab-%E4%B8%8A%E9%9D%A2),[BS-600](https://linear.app/affine-design/issue/BS-600/the-code-toolbar-remains-visible-when-it-overflows-in-the-ai-panel)
---
 .../core/src/blocksuite/presets/ai/chat-panel/index.ts        | 3 +++
 .../presets/ai/entries/code-toolbar/setup-code-toolbar.ts     | 4 ++--
 .../frontend/core/src/blocksuite/presets/ai/messages/text.ts  | 3 +++
 .../core/src/modules/right-sidebar/view/header.css.ts         | 1 +
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts
index fb6c350d9b95c..519ad9ef22162 100644
--- a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts
@@ -33,12 +33,15 @@ export class ChatPanel extends WithDisposable(ShadowlessElement) {
     }
 
     .chat-panel-title {
+      background: var(--affine-background-primary-color);
+      position: relative;
       padding: 8px 0px;
       width: 100%;
       height: 36px;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      z-index: 1;
 
       div:first-child {
         font-size: 14px;
diff --git a/packages/frontend/core/src/blocksuite/presets/ai/entries/code-toolbar/setup-code-toolbar.ts b/packages/frontend/core/src/blocksuite/presets/ai/entries/code-toolbar/setup-code-toolbar.ts
index cedf09d3cb703..c37064620ddce 100644
--- a/packages/frontend/core/src/blocksuite/presets/ai/entries/code-toolbar/setup-code-toolbar.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/entries/code-toolbar/setup-code-toolbar.ts
@@ -20,9 +20,9 @@ export function setupCodeToolbarEntry(codeToolbar: AffineCodeToolbarWidget) {
   const onAskAIClick = () => {
     const { host } = codeToolbar;
     const { selection } = host;
-    const imageBlock = codeToolbar.blockElement;
+    const codeBlock = codeToolbar.blockElement;
     selection.setGroup('note', [
-      selection.create('block', { blockId: imageBlock.blockId }),
+      selection.create('block', { blockId: codeBlock.blockId }),
     ]);
   };
   codeToolbar.setupDefaultConfig();
diff --git a/packages/frontend/core/src/blocksuite/presets/ai/messages/text.ts b/packages/frontend/core/src/blocksuite/presets/ai/messages/text.ts
index eba781feac9c5..8139a97338a87 100644
--- a/packages/frontend/core/src/blocksuite/presets/ai/messages/text.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/messages/text.ts
@@ -139,6 +139,9 @@ export class AIAnswerText extends WithDisposable(LitElement) {
       editor-host * {
         box-sizing: border-box;
       }
+      editor-host {
+        isolation: isolate;
+      }
     }
 
     ${textBlockStyles}
diff --git a/packages/frontend/core/src/modules/right-sidebar/view/header.css.ts b/packages/frontend/core/src/modules/right-sidebar/view/header.css.ts
index fa9ccd50e2617..f0b97c4b5b3e1 100644
--- a/packages/frontend/core/src/modules/right-sidebar/view/header.css.ts
+++ b/packages/frontend/core/src/modules/right-sidebar/view/header.css.ts
@@ -8,6 +8,7 @@ export const header = style({
   alignItems: 'center',
   flexShrink: 0,
   padding: '0 16px',
+  zIndex: 1,
   gap: '12px',
   background: cssVar('backgroundPrimaryColor'),
   selectors: {