From 37f4f8051a580da5fd70b7022520dd10c7db7535 Mon Sep 17 00:00:00 2001
From: yu859 <15715093608@163.com>
Date: Thu, 21 May 2026 21:46:39 +0800
Subject: [PATCH] fix(core): add stable scrollbar gutter to prevent layout
 shift

  Add scrollbar-gutter: stable to ViewJsonRender, CodeBlock, and
  DataTable to prevent content from shifting when scrollbars appear.
---
 .../client/webcomponents/components/views/ViewJsonRender.vue    | 2 +-
 .../client/webcomponents/json-render/components/CodeBlock.ts    | 1 +
 .../client/webcomponents/json-render/components/DataTable.ts    | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/client/webcomponents/components/views/ViewJsonRender.vue b/packages/core/src/client/webcomponents/components/views/ViewJsonRender.vue
index 8b435371..a192b7d9 100644
--- a/packages/core/src/client/webcomponents/components/views/ViewJsonRender.vue
+++ b/packages/core/src/client/webcomponents/components/views/ViewJsonRender.vue
@@ -87,7 +87,7 @@ watch(() => props.entry.ui?._stateKey, loadSpec)
 </script>
 
 <template>
-  <div class="vite-devtools-view-json-render w-full h-full overflow-auto" style="padding: 16px;">
+  <div class="vite-devtools-view-json-render w-full h-full overflow-auto" style="padding: 16px; scrollbar-gutter: stable;">
     <div v-if="isLoading" style="display: flex; align-items: center; justify-content: center; height: 100%; opacity: 0.5; font-size: 13px;">
       Loading...
     </div>
diff --git a/packages/core/src/client/webcomponents/json-render/components/CodeBlock.ts b/packages/core/src/client/webcomponents/json-render/components/CodeBlock.ts
index 371dc6c5..a0f1e119 100644
--- a/packages/core/src/client/webcomponents/json-render/components/CodeBlock.ts
+++ b/packages/core/src/client/webcomponents/json-render/components/CodeBlock.ts
@@ -28,6 +28,7 @@ export const CodeBlock = defineComponent({
             backgroundColor: surfaceMuted,
             borderRadius: filename ? '0 0 4px 4px' : '4px',
             overflow: 'auto',
+            scrollbarGutter: 'stable',
             maxHeight,
           },
         }, [h('code', code)]),
diff --git a/packages/core/src/client/webcomponents/json-render/components/DataTable.ts b/packages/core/src/client/webcomponents/json-render/components/DataTable.ts
index f3e96ad1..b3fd90dd 100644
--- a/packages/core/src/client/webcomponents/json-render/components/DataTable.ts
+++ b/packages/core/src/client/webcomponents/json-render/components/DataTable.ts
@@ -14,6 +14,7 @@ export const DataTable = defineComponent({
         class: 'jr-data-table',
         style: {
           overflow: 'auto',
+          scrollbarGutter: 'stable',
           maxHeight,
           border: borderSolid(border),
           borderRadius: '4px',