fix(core): add stable scrollbar gutter to prevent layout shift (#360)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: SaKaNa-Y

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>

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)]),

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',