improvement(workspace): allocate more space to name column in resource tables (#4645)

Author: waleedlatif1

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 (
     <colgroup>
       {hasCheckbox && <col style={{ width: CHECKBOX_COLUMN_WIDTH }} />}
       {columns.map((col, colIdx) => {
-        const columnRatio = weights[colIdx] / total
+        if (col.widthPx) {
+          return <col key={col.id} style={{ width: `${col.widthPx}px` }} />
+        }
+        const columnRatio = flexibleTotal > 0 ? flexibleWeights[colIdx] / flexibleTotal : 0
         const columnPercent = columnRatio * 100
-        const checkboxOffset = CHECKBOX_COLUMN_WIDTH_PX * columnRatio
+        const reservedOffset = reservedPx * columnRatio
 
         return (
           <col
             key={col.id}
             style={{
-              width: hasCheckbox
-                ? `calc(${columnPercent}% - ${checkboxOffset}px)`
-                : `${columnPercent}%`,
+              width:
+                reservedOffset > 0
+                  ? `calc(${columnPercent}% - ${reservedOffset}px)`
+                  : `${columnPercent}%`,
             }}
           />
         )

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<string, string> = {

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

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 {

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 = <Database className='size-[14px]' />

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 {

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

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