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() {