diff --git a/packages/frontend/component/src/theme/global.css b/packages/frontend/component/src/theme/global.css
index 96d78e006..99b819f36 100644
--- a/packages/frontend/component/src/theme/global.css
+++ b/packages/frontend/component/src/theme/global.css
@@ -6,6 +6,7 @@
 
 :root {
   --noise-background: url(./noise.avif);
+  text-autospace: normal;
 }
 
 html,
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts
index a962b4ad0..9b0f0ae23 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts
@@ -62,7 +62,7 @@ export class ArtifactPreviewPanel extends WithDisposable(ShadowlessElement) {
       background-color: ${unsafeCSSVarV2('layer/background/overlayPanel')};
       box-shadow: ${unsafeCSSVar('overlayPanelShadow')};
       height: 100%;
-      overflow-y: auto;
+      overflow: hidden;
     }
 
     .artifact-panel-header {
@@ -71,9 +71,6 @@ export class ArtifactPreviewPanel extends WithDisposable(ShadowlessElement) {
       justify-content: flex-end;
       padding: 0 12px;
       height: 52px;
-      position: sticky;
-      z-index: 1;
-      top: 0;
       background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
     }
 
@@ -104,6 +101,12 @@ export class ArtifactPreviewPanel extends WithDisposable(ShadowlessElement) {
       color: ${unsafeCSSVarV2('icon/secondary')};
     }
 
+    .artifact-panel-content {
+      overflow-y: auto;
+      height: calc(100% - 52px);
+      position: relative;
+    }
+
     .artifact-panel-close:hover {
       background-color: ${unsafeCSSVarV2('layer/background/tertiary')};
     }
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
index b9709d26a..2dac661fe 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
@@ -352,6 +352,8 @@ export class CodeArtifactTool extends ArtifactTool<
 > {
   static override styles = css`
     .code-artifact-preview {
+      overflow: hidden;
+      position: absolute;
       padding: 0;
       width: 100%;
       height: 100%;
@@ -363,6 +365,11 @@ export class CodeArtifactTool extends ArtifactTool<
       height: 100%;
     }
 
+    .code-artifact-preview > code-highlighter {
+      height: 100%;
+      overflow: auto;
+    }
+
     .code-artifact-preview :is(.html-preview-iframe, .html-preview-container) {
       height: 100%;
     }
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts
index 0f65b67ab..fbdc28b15 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts
@@ -46,7 +46,6 @@ export class DocComposeTool extends ArtifactTool<
   static override styles = css`
     .doc-compose-result-preview {
       padding: 24px;
-      height: 100%;
     }
 
     .doc-compose-result-preview-title {