From c398a07573f2ed759a8b0bc5bd7d3f806357fe36 Mon Sep 17 00:00:00 2001
From: lewis <32348572+wang-zhengxin@users.noreply.github.com>
Date: Thu, 6 Aug 2026 14:00:09 +0800
Subject: [PATCH] fix(editor): stabilize SQL run-statement gutter width

---
 .../src/components/editor/QueryEditor.vue     | 19 +++++--------------
 .../codemirrorStatementGutter.spec.ts         |  7 +++----
 .../lib/editor/codemirrorStatementGutter.ts   |  4 ++--
 apps/desktop/src/lib/editor/editorThemes.ts   |  8 ++++----
 4 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/apps/desktop/src/components/editor/QueryEditor.vue b/apps/desktop/src/components/editor/QueryEditor.vue
index 15ba9545bc..3f6f611ec3 100644
--- a/apps/desktop/src/components/editor/QueryEditor.vue
+++ b/apps/desktop/src/components/editor/QueryEditor.vue
@@ -448,9 +448,9 @@ let tableReferenceDropListenerRegistered = false;
 let imeCompositionActive = false;
 let pendingImeModelEmit = false;
 
-function runStatementGutterExtension(markers = props.statementExecutionMarkers ?? []): import("@codemirror/state").Extension {
+function runStatementGutterExtension(): import("@codemirror/state").Extension {
   const showRunButtons = !props.hideExecutionControls && settingsStore.editorSettings.showStatementRunButtons;
-  return shouldShowStatementGutter(showRunButtons, markers.length) ? (buildRunStatementGutterExtension?.() ?? []) : [];
+  return shouldShowStatementGutter(showRunButtons) ? (buildRunStatementGutterExtension?.() ?? []) : [];
 }
 
 let executableStatementRangeCache: ExecutableStatementRangeCache | null = null;
@@ -4785,15 +4785,6 @@ watch(
   { deep: true },
 );
 
-watch(
-  () => props.statementExecutionMarkers?.length ?? 0,
-  () => {
-    if (!view.value || !runGutterComp) return;
-    // Remove the compartment entirely when controls and markers are absent so the editor keeps no empty gutter width.
-    view.value.dispatch({ effects: runGutterComp.reconfigure(runStatementGutterExtension()) });
-  },
-);
-
 watch(
   () => props.connectionId,
   () => {
@@ -5195,7 +5186,7 @@ defineExpose({
 }
 
 :deep(.cm-run-statement-gutter) {
-  min-width: 34px;
+  min-width: 28px;
 }
 
 :deep(.cm-run-statement-gutter .cm-gutterElement) {
@@ -5203,8 +5194,8 @@ defineExpose({
   box-sizing: border-box;
   display: flex;
   justify-content: center;
-  min-width: 34px;
-  padding: 0 5px;
+  min-width: 28px;
+  padding: 0 2px;
 }
 
 :deep(.cm-statement-execution-marker) {
diff --git a/apps/desktop/src/lib/__tests__/codemirrorStatementGutter.spec.ts b/apps/desktop/src/lib/__tests__/codemirrorStatementGutter.spec.ts
index 92d616125e..d144a6837a 100644
--- a/apps/desktop/src/lib/__tests__/codemirrorStatementGutter.spec.ts
+++ b/apps/desktop/src/lib/__tests__/codemirrorStatementGutter.spec.ts
@@ -4,10 +4,9 @@ import { describe, expect, it } from "vitest";
 import { createStatementGutterMarkerDom, shouldShowStatementGutter } from "@/lib/editor/codemirrorStatementGutter";
 
 describe("CodeMirror statement gutter marker", () => {
-  it("omits the gutter when run buttons and status markers are absent", () => {
-    expect(shouldShowStatementGutter(false, 0)).toBe(false);
-    expect(shouldShowStatementGutter(true, 0)).toBe(true);
-    expect(shouldShowStatementGutter(false, 1)).toBe(true);
+  it("keeps gutter visibility controlled by the run-button preference", () => {
+    expect(shouldShowStatementGutter(false)).toBe(false);
+    expect(shouldShowStatementGutter(true)).toBe(true);
   });
 
   it("keeps execution status inside the run button column", () => {
diff --git a/apps/desktop/src/lib/editor/codemirrorStatementGutter.ts b/apps/desktop/src/lib/editor/codemirrorStatementGutter.ts
index 3ea577e5a3..9cdfdbd8be 100644
--- a/apps/desktop/src/lib/editor/codemirrorStatementGutter.ts
+++ b/apps/desktop/src/lib/editor/codemirrorStatementGutter.ts
@@ -8,8 +8,8 @@ export interface StatementGutterMarkerDomOptions {
   statusLabel?: string;
 }
 
-export function shouldShowStatementGutter(showRunButtons: boolean, markerCount: number): boolean {
-  return showRunButtons || markerCount > 0;
+export function shouldShowStatementGutter(showRunButtons: boolean): boolean {
+  return showRunButtons;
 }
 
 function createStatusIconDom(status: StatementExecutionMarkerStatus, includeCircle: boolean) {
diff --git a/apps/desktop/src/lib/editor/editorThemes.ts b/apps/desktop/src/lib/editor/editorThemes.ts
index 402555c44b..efb8fe787a 100644
--- a/apps/desktop/src/lib/editor/editorThemes.ts
+++ b/apps/desktop/src/lib/editor/editorThemes.ts
@@ -762,19 +762,19 @@ export function buildEditorFontThemeRules(opts?: { fixedHeight?: boolean; scroll
     },
     ".cm-lineNumbers .cm-gutterElement": {
       cursor: "pointer",
-      paddingRight: "16px",
+      paddingRight: "8px",
       userSelect: "none",
     },
     ".cm-run-statement-gutter": {
-      minWidth: "34px",
+      minWidth: "28px",
     },
     ".cm-run-statement-gutter .cm-gutterElement": {
       alignItems: "center",
       boxSizing: "border-box",
       display: "flex",
       justifyContent: "center",
-      minWidth: "34px",
-      padding: "0 5px",
+      minWidth: "28px",
+      padding: "0 2px",
     },
     ".cm-run-statement-marker": {
       alignItems: "center",