From d2841a5029d263db43a37f9922f717cd8511acb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E4=B8=AB=E8=AE=B2=E6=A2=B5?= <eryajf@163.com>
Date: Fri, 16 Oct 2026 00:00:43 +0800
Subject: [PATCH] fix(grid): make cell detail layout responsive

---
 apps/desktop/src/components/grid/DataGrid.vue      |  2 +-
 .../components/grid/DataGridCellDetailPanel.vue    | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 297cbadc27..a1873a86ca 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -15599,7 +15599,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
             </template>
           </div>
           <!-- Column lookup panel -->
-          <div v-if="goToColumnOpen" data-column-lookup-panel class="column-lookup-panel relative col-start-2 row-start-1 z-30 flex min-w-0 max-w-full flex-col overflow-hidden border-l bg-background shadow-lg" @keydown="onGoToColumnKeydown">
+          <div v-if="goToColumnOpen" data-column-lookup-panel class="column-lookup-panel relative col-start-2 row-start-1 z-30 flex min-w-0 max-w-full flex-col overflow-hidden border-l bg-background shadow-lg" :class="{ 'row-span-2': cellDetailPanelIsBottom }" @keydown="onGoToColumnKeydown">
             <div class="flex items-center gap-2 px-3 py-1.5 border-b shrink-0 bg-muted/20 h-9">
               <Columns3 class="w-3.5 h-3.5 text-muted-foreground" />
               <span class="text-xs font-medium flex-1 truncate">{{ t("grid.goToColumn") }}</span>
diff --git a/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue b/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
index 1ac5be4ac4..323418d8e4 100644
--- a/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
+++ b/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
@@ -99,26 +99,26 @@ defineExpose({ openSearch });
 <template>
   <TabsContent value="details" class="m-0 min-h-0 min-w-0 flex-1 flex flex-col">
     <div data-native-clipboard class="min-w-0 flex-1 min-h-0 overflow-auto px-3 pt-3 text-xs" :class="[valueFillsHeight ? 'flex flex-col gap-3' : 'space-y-3', editing && !panelIsBottom ? 'pb-1' : 'pb-3']">
-      <div v-if="panelIsBottom && !metadataCollapsed" class="grid grid-cols-[minmax(180px,1.6fr)_repeat(4,minmax(74px,0.55fr))_minmax(160px,1fr)] gap-3 rounded border bg-muted/20 p-2">
+      <div v-if="panelIsBottom && !metadataCollapsed" class="grid grid-cols-[minmax(0,1.6fr)_repeat(4,minmax(0,0.55fr))_minmax(0,1fr)] gap-3 rounded border bg-muted/20 p-2">
         <div class="min-w-0 space-y-1">
           <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
           <div class="truncate font-medium" :title="detail.column">{{ detail.column }}</div>
         </div>
-        <div class="space-y-1">
+        <div class="min-w-0 space-y-1">
           <div class="text-muted-foreground">{{ t("grid.rowNumber") }}</div>
-          <div>{{ detail.rowNumber }}</div>
+          <div class="min-w-0 break-all">{{ detail.rowNumber }}</div>
         </div>
         <div class="min-w-0 space-y-1">
           <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
           <div class="truncate" :class="detail.type ? typeColorClass(detail.type) : 'text-muted-foreground'" :title="detail.type || '-'">{{ detail.type || "-" }}</div>
         </div>
-        <div class="space-y-1">
+        <div class="min-w-0 space-y-1">
           <div class="text-muted-foreground">{{ t("grid.nullValue") }}</div>
-          <div>{{ (detail.isNull ?? detail.value === null) ? "true" : "false" }}</div>
+          <div class="min-w-0 break-all">{{ (detail.isNull ?? detail.value === null) ? "true" : "false" }}</div>
         </div>
-        <div class="space-y-1">
+        <div class="min-w-0 space-y-1">
           <div class="text-muted-foreground">{{ t("grid.valueLength") }}</div>
-          <div>{{ detail.length }}</div>
+          <div class="min-w-0 break-all">{{ detail.length }}</div>
         </div>
         <div class="min-w-0 space-y-1">
           <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>