fix(data-inspector): scroll the left pane at short viewport heights

Author: SaKaNa-Y

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">

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">
           {

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)"

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"