github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-21 03:59:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(grid): make cell detail layout responsive

Browse Source
This commit is contained in:
二丫讲梵
2026-10-16 00:00:43 +08:00
committed by GitHub
parent 6565b1b94f
commit d2841a5029
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/grid/DataGrid.vue
+1 -1
View File
@@ -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>
apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
+7 -7
View File
@@ -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>