From 33a3e0de58106c93cff7447e22798b77e9a89f74 Mon Sep 17 00:00:00 2001
From: Melody Ruch <396921921@qq.com>
Date: Thu, 13 Aug 2026 13:25:48 +0800
Subject: [PATCH] fix(editor): wrap long SQL preview text

---
 .../src/components/editor/SqlPreviewPanel.vue       |  3 ++-
 packages/app-tests/sqlPreviewWrap.test.ts           | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 packages/app-tests/sqlPreviewWrap.test.ts

diff --git a/apps/desktop/src/components/editor/SqlPreviewPanel.vue b/apps/desktop/src/components/editor/SqlPreviewPanel.vue
index a12c3cc69a..9772de79db 100644
--- a/apps/desktop/src/components/editor/SqlPreviewPanel.vue
+++ b/apps/desktop/src/components/editor/SqlPreviewPanel.vue
@@ -67,6 +67,7 @@ async function highlightSql() {
     highlightedHtml.value = highlighter.codeToHtml(displaySql.value, {
       lang: "sql",
       theme,
+      structure: "inline",
     });
   } catch {
     // fallback to plain text
@@ -202,7 +203,7 @@ onBeforeUnmount(() => {
       </div>
 
       <!-- Shiki highlighted SQL -->
-      <div v-else-if="highlightedHtml" data-native-clipboard class="p-3 text-xs leading-relaxed [&_pre]:!bg-transparent [&_pre]:!p-0 [&_code]:!font-mono [&_code]:text-xs" v-html="highlightedHtml" />
+      <pre v-else-if="highlightedHtml" data-native-clipboard class="m-0 p-3 text-xs font-mono leading-relaxed whitespace-pre-wrap break-words select-text" v-html="highlightedHtml"></pre>
 
       <!-- Plain text fallback -->
       <pre v-else data-native-clipboard class="p-3 text-xs font-mono whitespace-pre-wrap select-text">{{ displaySql }}</pre>
diff --git a/packages/app-tests/sqlPreviewWrap.test.ts b/packages/app-tests/sqlPreviewWrap.test.ts
new file mode 100644
index 0000000000..530f54d8c1
--- /dev/null
+++ b/packages/app-tests/sqlPreviewWrap.test.ts
@@ -0,0 +1,13 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const sqlPreviewSource = readFileSync("apps/desktop/src/components/editor/SqlPreviewPanel.vue", "utf8");
+
+describe("SQL preview wrapping", () => {
+  it("renders highlighted SQL inline inside a wrapping preformatted block", () => {
+    expect(sqlPreviewSource).toContain('structure: "inline"');
+    expect(sqlPreviewSource).toContain('<pre v-else-if="highlightedHtml"');
+    expect(sqlPreviewSource).toContain("whitespace-pre-wrap break-words");
+    expect(sqlPreviewSource).toContain('v-html="highlightedHtml"');
+  });
+});