diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx index 931b59ea15a..b0a149b5f1e 100644 --- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx +++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx @@ -23,6 +23,8 @@ export interface ResourceColumn { id: string header: string widthMultiplier?: number + /** Fixed pixel width. When set, the column is excluded from proportional sizing. */ + widthPx?: number } export interface ResourceCell { @@ -649,26 +651,32 @@ const ResourceColGroup = memo(function ResourceColGroup({ columns, hasCheckbox, }: ResourceColGroupProps) { - const weights = columns.map( - (col, colIdx) => (colIdx === 0 ? 2.5 : 1.0) * (col.widthMultiplier ?? 1) + const fixedPxTotal = columns.reduce((sum, col) => sum + (col.widthPx ?? 0), 0) + const flexibleWeights = columns.map((col, colIdx) => + col.widthPx ? 0 : (colIdx === 0 ? 2.5 : 1.0) * (col.widthMultiplier ?? 1) ) - const total = weights.reduce((s, w) => s + w, 0) + const flexibleTotal = flexibleWeights.reduce((s, w) => s + w, 0) + const reservedPx = fixedPxTotal + (hasCheckbox ? CHECKBOX_COLUMN_WIDTH_PX : 0) return ( {hasCheckbox && } {columns.map((col, colIdx) => { - const columnRatio = weights[colIdx] / total + if (col.widthPx) { + return + } + const columnRatio = flexibleTotal > 0 ? flexibleWeights[colIdx] / flexibleTotal : 0 const columnPercent = columnRatio * 100 - const checkboxOffset = CHECKBOX_COLUMN_WIDTH_PX * columnRatio + const reservedOffset = reservedPx * columnRatio return ( 0 + ? `calc(${columnPercent}% - ${reservedOffset}px)` + : `${columnPercent}%`, }} /> ) diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx index ec1147a8fee..6cf3f4f7285 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx +++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx @@ -113,11 +113,11 @@ const ACCEPT_ATTR = SUPPORTED_EXTENSIONS.map((ext) => `.${ext}`).join(',') const COLUMNS: ResourceColumn[] = [ { id: 'name', header: 'Name' }, - { id: 'size', header: 'Size' }, - { id: 'type', header: 'Type' }, - { id: 'created', header: 'Created' }, - { id: 'owner', header: 'Owner' }, - { id: 'updated', header: 'Last Updated' }, + { id: 'size', header: 'Size', widthPx: 110 }, + { id: 'type', header: 'Type', widthPx: 120 }, + { id: 'created', header: 'Created', widthPx: 150 }, + { id: 'owner', header: 'Owner', widthPx: 160 }, + { id: 'updated', header: 'Last Updated', widthPx: 150 }, ] const MIME_TYPE_LABELS: Record = { diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx index e7e38119d63..59dee5bbd92 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx @@ -127,9 +127,9 @@ function truncateContent(content: string, maxLength = 150, searchQuery = ''): st const CHUNK_COLUMNS: ResourceColumn[] = [ { id: 'content', header: 'Content' }, - { id: 'index', header: 'Index' }, - { id: 'tokens', header: 'Tokens' }, - { id: 'status', header: 'Status' }, + { id: 'index', header: 'Index', widthPx: 100 }, + { id: 'tokens', header: 'Tokens', widthPx: 100 }, + { id: 'status', header: 'Status', widthPx: 120 }, ] export function Document({ diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx index 1652e6eb2d2..26489ab687d 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx @@ -86,12 +86,12 @@ const DOCUMENTS_PER_PAGE = 50 const DOCUMENT_COLUMNS: ResourceColumn[] = [ { id: 'name', header: 'Name' }, - { id: 'size', header: 'Size' }, - { id: 'tokens', header: 'Tokens' }, - { id: 'chunks', header: 'Chunks' }, - { id: 'uploaded', header: 'Uploaded' }, - { id: 'status', header: 'Status' }, - { id: 'tags', header: 'Tags' }, + { id: 'size', header: 'Size', widthPx: 90 }, + { id: 'tokens', header: 'Tokens', widthPx: 90 }, + { id: 'chunks', header: 'Chunks', widthPx: 90 }, + { id: 'uploaded', header: 'Uploaded', widthPx: 140 }, + { id: 'status', header: 'Status', widthPx: 110 }, + { id: 'tags', header: 'Tags', widthPx: 160 }, ] interface KnowledgeBaseProps { diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx index decb6549af6..32e4d9e7451 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx @@ -43,12 +43,12 @@ interface KnowledgeBaseWithDocCount extends KnowledgeBaseData { const COLUMNS: ResourceColumn[] = [ { id: 'name', header: 'Name' }, - { id: 'documents', header: 'Documents' }, - { id: 'tokens', header: 'Tokens' }, - { id: 'connectors', header: 'Connectors' }, - { id: 'created', header: 'Created' }, - { id: 'owner', header: 'Owner' }, - { id: 'updated', header: 'Last Updated' }, + { id: 'documents', header: 'Documents', widthPx: 110 }, + { id: 'tokens', header: 'Tokens', widthPx: 90 }, + { id: 'connectors', header: 'Connectors', widthPx: 130 }, + { id: 'created', header: 'Created', widthPx: 140 }, + { id: 'owner', header: 'Owner', widthPx: 150 }, + { id: 'updated', header: 'Last Updated', widthPx: 140 }, ] const DATABASE_ICON = diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx index 7ddf9eec8f2..20413838aec 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx @@ -106,11 +106,11 @@ const REFRESH_SPINNER_DURATION_MS = 1000 as const const LOG_COLUMNS: ResourceColumn[] = [ { id: 'workflow', header: 'Workflow' }, - { id: 'date', header: 'Date' }, - { id: 'status', header: 'Status' }, - { id: 'cost', header: 'Cost' }, - { id: 'trigger', header: 'Trigger' }, - { id: 'duration', header: 'Duration' }, + { id: 'date', header: 'Date', widthPx: 160 }, + { id: 'status', header: 'Status', widthPx: 120 }, + { id: 'cost', header: 'Cost', widthPx: 100 }, + { id: 'trigger', header: 'Trigger', widthPx: 140 }, + { id: 'duration', header: 'Duration', widthPx: 110 }, ] interface LogSelectionState { diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx index e300cf3fe26..06182ff41d5 100644 --- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx +++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx @@ -50,8 +50,8 @@ function getScheduleDescription(s: WorkspaceScheduleData) { const COLUMNS: ResourceColumn[] = [ { id: 'task', header: 'Task' }, { id: 'schedule', header: 'Schedule', widthMultiplier: 1.5 }, - { id: 'nextRun', header: 'Next Run' }, - { id: 'lastRun', header: 'Last Run' }, + { id: 'nextRun', header: 'Next Run', widthPx: 160 }, + { id: 'lastRun', header: 'Last Run', widthPx: 160 }, ] export function ScheduledTasks() { diff --git a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx index 5cf881a2f4b..6bd2a04d796 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx @@ -49,11 +49,11 @@ const logger = createLogger('Tables') const COLUMNS: ResourceColumn[] = [ { id: 'name', header: 'Name' }, - { id: 'columns', header: 'Columns' }, - { id: 'rows', header: 'Rows' }, - { id: 'created', header: 'Created' }, - { id: 'owner', header: 'Owner' }, - { id: 'updated', header: 'Last Updated' }, + { id: 'columns', header: 'Columns', widthPx: 110 }, + { id: 'rows', header: 'Rows', widthPx: 100 }, + { id: 'created', header: 'Created', widthPx: 150 }, + { id: 'owner', header: 'Owner', widthPx: 160 }, + { id: 'updated', header: 'Last Updated', widthPx: 150 }, ] export function Tables() {