Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 1 commit into from
May 18, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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}%`,
}}
/>
)
Expand Down
10 changes: 5 additions & 5 deletions apps/sim/app/workspace/[workspaceId]/files/files.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> = {
Expand Down
6 changes: 3 additions & 3 deletions apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
12 changes: 6 additions & 6 deletions apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 6 additions & 6 deletions apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]' />
Expand Down
10 changes: 5 additions & 5 deletions apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
10 changes: 5 additions & 5 deletions apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
Loading