From 223e62c1add33708106e16d8b05ac016751dc632 Mon Sep 17 00:00:00 2001
From: yu859 <15715093608@163.com>
Date: Sat, 8 Aug 2026 16:17:26 +0800
Subject: [PATCH] fix(data-inspector): scroll the left pane at short viewport
 heights

---
 plugins/data-inspector/src/spa/App.vue        | 28 +++++++++++--------
 .../src/spa/components/DataShapePanel.vue     |  2 +-
 .../src/spa/components/QueryPanel.vue         |  2 +-
 .../src/spa/components/SavedQueriesPanel.vue  |  2 +-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/plugins/data-inspector/src/spa/App.vue b/plugins/data-inspector/src/spa/App.vue
index 6071533e..0da81935 100644
--- a/plugins/data-inspector/src/spa/App.vue
+++ b/plugins/data-inspector/src/spa/App.vue
@@ -65,18 +65,22 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
           <div class="flex flex-col h-full overflow-hidden min-h-0">
             <AppHeader />
             <DataSourcePanel />
-            <QueryPanel />
-            <SavedQueriesPanel
-              :saved="savedApi.saved.value"
-              :suggested="wb.activeSource.value?.queries ?? []"
-              :current-query="wb.query.value"
-              :current-filters="wb.settings"
-              :readonly="connection.mode === 'static'"
-              class="px3 py2"
-              @load="wb.applyRecipe($event)"
-              @remove="savedApi.remove($event)"
-              @save="saveCurrent"
-            />
+            <div class="flex-1 min-h-0 overflow-y-auto">
+              <div class="min-h-full flex flex-col">
+                <QueryPanel />
+                <SavedQueriesPanel
+                  :saved="savedApi.saved.value"
+                  :suggested="wb.activeSource.value?.queries ?? []"
+                  :current-query="wb.query.value"
+                  :current-filters="wb.settings"
+                  :readonly="connection.mode === 'static'"
+                  class="px3 py2"
+                  @load="wb.applyRecipe($event)"
+                  @remove="savedApi.remove($event)"
+                  @save="saveCurrent"
+                />
+              </div>
+            </div>
           </div>
         </Pane>
         <Pane class="min-w-0">
diff --git a/plugins/data-inspector/src/spa/components/DataShapePanel.vue b/plugins/data-inspector/src/spa/components/DataShapePanel.vue
index fa7c207b..07ef98f3 100644
--- a/plugins/data-inspector/src/spa/components/DataShapePanel.vue
+++ b/plugins/data-inspector/src/spa/components/DataShapePanel.vue
@@ -87,7 +87,7 @@ const rootLabel = computed(() => {
     </div>
 
     <!-- One-level data shape as a plain code block; click a prop to query it. -->
-    <div class="flex-1 min-h-0 overflow-auto font-mono max-h50 overflow-auto text-xs border border-base rounded-lg px-3 py-2">
+    <div class="flex-1 min-h-0 overflow-auto font-mono max-h50 text-xs border border-base rounded-lg px-3 py-2">
       <template v-if="entries.length">
         <div class="op50 select-none">
           {
diff --git a/plugins/data-inspector/src/spa/components/QueryPanel.vue b/plugins/data-inspector/src/spa/components/QueryPanel.vue
index 7204f9c5..6c518d52 100644
--- a/plugins/data-inspector/src/spa/components/QueryPanel.vue
+++ b/plugins/data-inspector/src/spa/components/QueryPanel.vue
@@ -69,7 +69,7 @@ function copyQuery(): void {
       v-model="wb.query.value"
       :syntax="wb.syntax.value"
       :suggestions="wb.suggestions.value"
-      class="flex-1 min-h-0 mx2"
+      class="flex-1 min-h-32 mx2"
       @run="wb.runNow()"
       @suggest="wb.scheduleSuggestions($event)"
       @accept="wb.acceptSuggestion($event)"
diff --git a/plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue b/plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue
index 9c27779d..a991199d 100644
--- a/plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue
+++ b/plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue
@@ -110,7 +110,7 @@ function filterBadges(entry: Query): FilterBadge[] {
       </ActionButton>
     </div>
 
-    <div v-if="entries.length" class="flex-1 overflow-auto min-h-0 max-h-80 grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-1">
+    <div v-if="entries.length" class="grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-1">
       <div
         v-for="entry in entries"
         :key="entry.key"