opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-10 05:56:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve sqlite file preview layout and single table handling

Browse Source 
- Add min-w-0 to flex containers for proper text truncation
- Use w-max on table to ensure columns don't collapse
- Simplify table selector when only one table exists (remove dropdown)
This commit is contained in:
yyh 2026-01-22 15:12:16 +08:00
parent 11005ccb63
commit ed60a375b5
No known key found for this signature in database
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/workflow/skill/viewer/sqlite-file-preview/data-table.tsx
View File

@ -63,7 +63,7 @@ const DataTable: FC<DataTableProps> = ({ columns, values }) => {
}, [keyColumnIndex, t, values])
return (
<table className="min-w-full table-auto border-separate border-spacing-0">
<table className="w-max min-w-full table-auto border-separate border-spacing-0">
<thead className="sticky top-0 z-10 text-text-secondary">
<tr>
{columns.map(column => (

4
web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx
View File

@ -141,7 +141,7 @@ const SQLiteFilePreview: FC<SQLiteFilePreviewProps> = ({
}
return (
<div className="flex h-full w-full flex-col gap-1 p-1">
<div className="flex h-full w-full min-w-0 flex-col gap-1 p-1">
<div className="flex flex-wrap items-center justify-between gap-2">
<TableSelector
tables={tables}
@ -150,7 +150,7 @@ const SQLiteFilePreview: FC<SQLiteFilePreviewProps> = ({
isLoading={tableState.isLoading}
/>
</div>
<div className="min-h-0 flex-1 overflow-auto rounded-lg bg-components-panel-bg">
<div className="min-h-0 min-w-0 flex-1 overflow-auto rounded-lg bg-components-panel-bg">
{tableState.isLoading
? (
<div className="flex h-full w-full items-center justify-center">

12
web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
View File

@ -36,6 +36,18 @@ const TableSelector: FC<TableSelectorProps> = ({
const label = selectedTable || t('skillSidebar.sqlitePreview.selectTable')
const isPlaceholder = !selectedTable
const isSingleTable = tables.length === 1
if (isSingleTable) {
return (
<div className="inline-flex items-center gap-1 rounded-[6px] px-1.5 py-1 text-text-secondary">
<TableCells className="h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
<span className={cn('system-sm-medium min-w-0 max-w-[220px] truncate', isPlaceholder && 'text-text-tertiary')}>
{label}
</span>
</div>
)
}
return (
<PortalToFollowElem