From ed60a375b58b57aac0969aa8f4bd41ead961b6b4 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 22 Jan 2026 15:12:16 +0800
Subject: [PATCH] fix: improve sqlite file preview layout and single table
 handling

- 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)
---
 .../skill/viewer/sqlite-file-preview/data-table.tsx  |  2 +-
 .../skill/viewer/sqlite-file-preview/index.tsx       |  4 ++--
 .../viewer/sqlite-file-preview/table-selector.tsx    | 12 ++++++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/app/components/workflow/skill/viewer/sqlite-file-preview/data-table.tsx b/web/app/components/workflow/skill/viewer/sqlite-file-preview/data-table.tsx
index 8400274dc1..909665b503 100644
--- a/web/app/components/workflow/skill/viewer/sqlite-file-preview/data-table.tsx
+++ b/web/app/components/workflow/skill/viewer/sqlite-file-preview/data-table.tsx
@@ -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 => (
diff --git a/web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx b/web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx
index 9478935a63..1b34b298a1 100644
--- a/web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx
+++ b/web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx
@@ -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">
diff --git a/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx b/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
index 31204b5325..ac0d28b19a 100644
--- a/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
+++ b/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
@@ -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