From 7cff8091e40428dc3276894b4e5134f64d11d5d2 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Tue, 15 Jul 2025 09:52:58 +0800
Subject: [PATCH] fix: ai artifact preview styles (#13203)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

source: https://x.com/yisibl/status/1944679763991568639

#### PR Dependency Tree


* **PR #13203** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

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

* **Style**
  * Updated global text spacing for improved visual consistency.
* Enhanced scrolling behavior and layout in artifact preview and code
artifact components for smoother navigation.
* Refined document composition preview styling for improved layout
control.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->





#### PR Dependency Tree


* **PR #13203** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
---
 packages/frontend/component/src/theme/global.css      |  1 +
 .../ai/components/ai-tools/artifacts-preview-panel.ts | 11 +++++++----
 .../ai/components/ai-tools/code-artifact.ts           |  7 +++++++
 .../blocksuite/ai/components/ai-tools/doc-compose.ts  |  1 -
 4 files changed, 15 insertions(+), 5 deletions(-)

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 {