fix: ai artifact preview styles (#13203)

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

@@ -6,6 +6,7 @@
 
 :root {
   --noise-background: url(./noise.avif);
+  text-autospace: normal;
 }
 
 html,

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')};
     }

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%;
     }

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 {