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)
toeverything · Jun 28, 2024 · fbf6760 · fbf6760
1 parent e877f20
commit fbf6760
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 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
@@ -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
@@ -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
@@ -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
@@ -8,6 +8,7 @@ export const header = style({
   alignItems: 'center',
   flexShrink: 0,
   padding: '0 16px',
+  zIndex: 1,
   gap: '12px',
   background: cssVar('backgroundPrimaryColor'),
   selectors: {