Merge pull request #1668 from jumpserver/pr@dev@fix_chen_query_grid_overflow

fix(chen): constrain query result grid overflow

Author: Zxc4wonder

ui/chen/components/DataGrid.client.vue

@@ -539,7 +539,7 @@ onBeforeUnmount(() => {
 <template>
   <div
     ref="container"
-    class="ag-theme-balham chen-grid h-full w-full"
+    class="ag-theme-balham chen-grid h-full min-h-0 min-w-0 w-full overflow-hidden"
     :class="{
       'chen-grid-striped': gridPreferences.stripedRows,
       'chen-grid-cell-borders': gridPreferences.showCellBorders
@@ -548,7 +548,7 @@ onBeforeUnmount(() => {
     @keydown.capture="handleKeyDown"
   >
     <AgGridVue
-      class="h-full w-full"
+      class="h-full min-h-0 min-w-0 w-full"
       theme="legacy"
       :column-defs="columnDefs"
       :row-data="rowData"

ui/chen/components/DataViewPanel.vue

@@ -278,7 +278,7 @@ function importCsvRows(rows: Array<Record<string, string | null>>) {
 </script>
 
 <template>
-  <div class="flex h-full min-h-0 flex-col">
+  <div class="flex h-full min-h-0 min-w-0 flex-col">
     <div class="flex flex-wrap items-center gap-1 border-b border-default px-2 py-1">
       <div class="flex flex-wrap items-center gap-1">
         <button
@@ -302,7 +302,7 @@ function importCsvRows(rows: Array<Record<string, string | null>>) {
       </div>
     </div>
 
-    <div v-if="tab.activePanel === 'data'" class="flex min-h-0 flex-1 flex-col">
+    <div v-if="tab.activePanel === 'data'" class="flex min-h-0 min-w-0 flex-1 flex-col">
       <div v-if="missingPrimaryKey" class="border-b border-warning/20 bg-warning/10 px-3 py-1.5 text-xs text-warning">
         {{ t("Chen.TableWithoutPrimaryKeyNotEditable") }}
       </div>
@@ -413,7 +413,7 @@ function importCsvRows(rows: Array<Record<string, string | null>>) {
         />
       </div>
 
-      <div class="min-h-0 flex-1 overflow-auto">
+      <div class="min-h-0 min-w-0 flex-1 overflow-hidden">
         <ChenDataGrid
           ref="dataGrid"
           :key="`${tab.id}:${tab.data?.fields?.map((field) => field.name).join(',') || ''}:${tab.data?.data?.length || 0}`"

ui/chen/components/QueryConsolePanel.vue

@@ -355,8 +355,8 @@ defineExpose({ editorSnapshot });
 </script>
 
 <template>
-  <div ref="queryPanel" class="grid h-full min-h-0" :style="queryPanelRows">
-    <div class="relative flex min-h-0 flex-col overflow-hidden px-3 pt-3 pb-[3px]">
+  <div ref="queryPanel" class="grid h-full min-h-0 min-w-0 grid-cols-1" :style="queryPanelRows">
+    <div class="relative flex min-h-0 min-w-0 flex-col overflow-hidden px-3 pt-3 pb-[3px]">
       <div class="mb-2 flex shrink-0 items-center gap-2">
         <UButton
           v-if="tab.state.inQuery || tab.state.canCancel || tab.executionPlanLoading"
@@ -430,11 +430,11 @@ defineExpose({ editorSnapshot });
           </UButton>
         </UDropdownMenu>
       </div>
-      <div class="relative flex min-h-0 flex-1">
+      <div class="relative flex min-h-0 min-w-0 flex-1">
         <ChenSqlEditor
           ref="sqlEditor"
           v-model="statementValue"
-          class="min-h-0 flex-1"
+          class="min-h-0 min-w-0 flex-1"
           :db-type="dbType"
           :completion-source="completionSource"
           :sql-keyword-case="sqlKeywordCase"
@@ -481,7 +481,7 @@ defineExpose({ editorSnapshot });
       <div class="absolute -inset-y-1.5 inset-x-0" />
     </div>
 
-    <div class="flex min-h-0 flex-col">
+    <div class="flex min-h-0 min-w-0 flex-col">
       <div class="flex shrink-0 items-center gap-1 border-b border-default px-2 py-1">
         <button
           class="rounded-md px-2 py-1 text-xs"
@@ -500,7 +500,7 @@ defineExpose({ editorSnapshot });
       </div>
       <QueryResultTabs
         v-if="tab.activeBottomPane !== 'plan'"
-        class="min-h-0 flex-1"
+        class="min-h-0 min-w-0 flex-1"
         :result-tabs="tab.resultTabs"
         :active-result-tab-id="tab.activeResultTabId"
         closable
@@ -513,7 +513,12 @@ defineExpose({ editorSnapshot });
         @close="emit('closeResult', tab, $event)"
         @data-view-action="(result, action, data) => emit('dataViewAction', tab, result, action, data)"
       />
-      <ExecutionPlanTree v-else class="min-h-0 flex-1" :plan="tab.executionPlan" :loading="tab.executionPlanLoading" />
+      <ExecutionPlanTree
+        v-else
+        class="min-h-0 min-w-0 flex-1"
+        :plan="tab.executionPlan"
+        :loading="tab.executionPlanLoading"
+      />
     </div>
 
     <SqlSnippetSaveDialog

ui/chen/components/QueryResultTabs.vue

@@ -132,7 +132,7 @@ function cancelActiveResultChanges() {
 </script>
 
 <template>
-  <div class="flex min-h-0 flex-col">
+  <div class="flex min-h-0 min-w-0 flex-col">
     <div class="shrink-0 border-b border-default px-2 py-1">
       <div class="flex items-center gap-1">
         <div
@@ -163,14 +163,14 @@ function cancelActiveResultChanges() {
       </div>
     </div>
 
-    <div v-if="!activeResult" class="grid min-h-0 flex-1 place-items-center px-6 text-sm text-muted">
+    <div v-if="!activeResult" class="grid min-h-0 min-w-0 flex-1 place-items-center px-6 text-sm text-muted">
       <div class="text-center">
         <UIcon name="i-lucide-table-properties" class="mx-auto mb-2 size-5" />
         <p>{{ emptyMessage }}</p>
       </div>
     </div>
 
-    <div v-else-if="activeResult" :key="activeResult.id" class="flex min-h-0 flex-1 flex-col">
+    <div v-else-if="activeResult" :key="activeResult.id" class="flex min-h-0 min-w-0 flex-1 flex-col">
       <div
         v-if="activeResultMissingPrimaryKey"
         class="border-b border-warning/20 bg-warning/10 px-3 py-1.5 text-xs text-warning"
@@ -220,14 +220,14 @@ function cancelActiveResultChanges() {
       </div>
       <div
         v-if="activeResult.affectedRows !== undefined"
-        class="grid min-h-0 flex-1 place-items-center px-6 text-sm text-muted"
+        class="grid min-h-0 min-w-0 flex-1 place-items-center px-6 text-sm text-muted"
       >
         <div class="text-center">
           <UIcon name="i-lucide-circle-check" class="mx-auto mb-2 size-6 text-success" />
           <p class="font-medium text-default">{{ t("Chen.StatementExecutedSuccessfully") }}</p>
         </div>
       </div>
-      <div v-else class="min-h-0 flex-1 overflow-auto">
+      <div v-else class="min-h-0 min-w-0 flex-1 overflow-hidden">
         <ChenDataGrid
           ref="dataGrid"
           :key="`${activeResult.id}:${activeResult.data?.fields?.map((field) => field.name).join(',') || ''}:${activeResult.data?.data?.length || 0}`"

ui/chen/workspaces/DatabaseSessionSurface.vue

@@ -1992,7 +1992,7 @@ defineExpose({ focus });
 
 <template>
   <div class="relative isolate h-full min-h-0 overflow-hidden bg-[var(--workspace-surface-main)] text-[var(--app-fg)]">
-    <div v-if="session.ready.value" class="relative flex h-full min-h-0">
+    <div v-if="session.ready.value" class="relative flex h-full min-h-0 min-w-0">
       <ResourceTreePanel
         v-show="!isNarrowScreen || resourceTreeOpen"
         class="z-40 max-md:absolute max-md:inset-y-0 max-md:left-0 max-md:shadow-xl"
@@ -2072,7 +2072,7 @@ defineExpose({ focus });
           <span>{{ activeConnectionError }}</span>
         </div>
 
-        <div v-if="workspace.activeWorkspaceTab.value" class="min-h-0 flex-1">
+        <div v-if="workspace.activeWorkspaceTab.value" class="min-h-0 min-w-0 flex-1 overflow-hidden">
           <QueryConsolePanel
             v-if="activeQueryTab"
             ref="queryConsolePanel"