From b09e3d188e79abdf5ec5f79f3119fcdce72057be Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Wed, 24 Jun 2026 20:13:29 +0800
Subject: [PATCH] fix: reposition cell detail edit buttons for side panel
 layout

Co-authored-by: staff <staff@qimaos-MacBook-Pro.local>
---
 apps/desktop/src/components/grid/DataGrid.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 27b901494..a20b44685 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -7882,7 +7882,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                       </div>
                     </div>
                   </template>
-                  <div class="space-y-1" :class="[{ 'min-h-0 flex flex-col': cellDetailPanelIsBottom || isEditingDetail }, isEditingDetail ? 'flex-1' : '']">
+                  <div class="space-y-1" :class="[{ 'min-h-0 flex flex-col': cellDetailPanelIsBottom || isEditingDetail }, cellDetailPanelIsBottom && isEditingDetail ? 'flex-1' : '']">
                     <div class="flex min-h-5 items-center justify-between gap-2">
                       <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
                       <div v-if="!isEditingDetail" class="flex items-center gap-1">
@@ -7928,10 +7928,18 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                       </a>
                     </div>
                     <template v-if="isEditingDetail">
-                      <div class="min-h-0 flex-1">
+                      <div class="min-h-0" :class="cellDetailPanelIsBottom ? 'flex-1' : 'h-40'">
                         <TemporalCellEditor v-if="detailTemporalEditorKind" v-model="detailEditValue" :kind="detailTemporalEditorKind" variant="inline" :commit-on-close="false" @cancel="cancelDetailEdit" @commit="commitDetailEdit" />
                         <div v-else ref="detailsEditorContainer" data-cell-detail-editor-root class="min-h-0 h-full w-full rounded border overflow-hidden" />
                       </div>
+                      <div v-if="!cellDetailPanelIsBottom" class="flex shrink-0 gap-1 mt-1">
+                        <Button size="sm" class="h-6 text-xs" @click="commitDetailEdit">
+                          {{ t("dangerDialog.confirm") }}
+                        </Button>
+                        <Button variant="outline" size="sm" class="h-6 text-xs" @click="cancelDetailEdit">
+                          {{ t("dangerDialog.cancel") }}
+                        </Button>
+                      </div>
                     </template>
                     <pre v-else class="overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words cursor-pointer hover:border-primary/50" :class="{ 'cursor-text': activeCellDetail.isEditable }" @dblclick="startDetailEdit">{{
                       sideDetailJsonView && activeCellDetail.formattedJson ? activeCellDetail.formattedJson : activeCellDetail.rawValuePreview
@@ -7947,7 +7955,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                 </div>
 
                 <div class="border-t p-1.5 flex gap-1" :class="cellDetailPanelIsBottom ? 'items-center' : 'flex-col'">
-                  <div v-if="isEditingDetail" class="flex shrink-0 gap-1" :class="cellDetailPanelIsBottom ? 'mr-auto' : ''">
+                  <div v-if="isEditingDetail && cellDetailPanelIsBottom" class="flex shrink-0 gap-1 mr-auto">
                     <Button size="sm" class="h-6 text-xs" @click="commitDetailEdit">
                       {{ t("dangerDialog.confirm") }}
                     </Button>