adjust col width

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx

@@ -88,7 +88,11 @@ const logger = createLogger('TableView')
 const EMPTY_CHECKED_ROWS = new Set<number>()
 const COL_WIDTH_MIN = 80
 const COL_WIDTH_AUTO_FIT_MAX = 1000
-const CHECKBOX_COL_WIDTH = 40
+// Wide enough to host the row-number + per-row run button side by side.
+// Single-digit row numbers (rows 1–9) and multi-digit (10+) need to render
+// with the play button at the same x-position so the column doesn't reflow
+// row-by-row.
+const CHECKBOX_COL_WIDTH = 56
 const ADD_COL_WIDTH = 120
 /** Width of the column-config slideout (matches `column-sidebar.tsx`'s `w-[400px]`). */
 const COLUMN_SIDEBAR_WIDTH = 400
@@ -3236,7 +3240,7 @@ const DataRow = React.memo(function DataRow({
       <td className={cn(CELL_CHECKBOX, 'cursor-pointer')}>
         <div className='flex items-center justify-between gap-1'>
           <div
-            className='group/checkbox flex h-[20px] w-[20px] items-center justify-center'
+            className='group/checkbox flex h-[20px] w-[24px] shrink-0 items-center justify-center'
             onMouseDown={(e) => {
               if (e.button !== 0) return
               onRowToggle(rowIndex, e.shiftKey)

apps/sim/hooks/queries/tables.ts

@@ -1088,28 +1088,63 @@ interface RunGroupVariables {
   runMode?: 'all' | 'incomplete'
 }
 
-type RowsCacheSnapshots = Array<[ReadonlyArray<unknown>, TableRowsResponse]>
+type InfiniteRowsCache = { pages: TableRowsResponse[]; pageParams: number[] }
+/**
+ * Cache shapes that hold table-row data. Single-page (`useTableRows`) and
+ * infinite (`useInfiniteTableRows`) live under the same `rowsRoot(tableId)`
+ * prefix, so optimistic mutations have to walk both shapes.
+ */
+type RowsCacheEntry = TableRowsResponse | InfiniteRowsCache
+type RowsCacheSnapshots = Array<[ReadonlyArray<unknown>, RowsCacheEntry]>
+
+function isInfiniteRowsCache(value: unknown): value is InfiniteRowsCache {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    Array.isArray((value as { pages?: unknown }).pages) &&
+    Array.isArray((value as { pageParams?: unknown }).pageParams)
+  )
+}
 
 /**
  * Walks every cached row-list under `tableId`, applies `transform` to each row,
- * and snapshots the originals for rollback. Returns `null` if no row was touched
- * — callers can use that to skip a useless invalidation cycle.
+ * and snapshots the originals for rollback.
  *
- * `transform(row)` returns the next row to write, or `null` to leave it. The
- * common pattern is "matching cells flip state, others are skipped".
+ * Handles both cache shapes: the single-page `TableRowsResponse` and the
+ * infinite-query `{ pages, pageParams }`. `transform(row)` returns the next
+ * row to write, or `null` to leave it. The common pattern is "matching cells
+ * flip state, others are skipped".
  */
 export async function snapshotAndMutateRows(
   queryClient: ReturnType<typeof useQueryClient>,
   tableId: string,
   transform: (row: TableRow) => TableRow | null
 ): Promise<RowsCacheSnapshots> {
   await queryClient.cancelQueries({ queryKey: tableKeys.rowsRoot(tableId) })
-  const matching = queryClient.getQueriesData<TableRowsResponse>({
+  const matching = queryClient.getQueriesData<RowsCacheEntry>({
     queryKey: tableKeys.rowsRoot(tableId),
   })
   const snapshots: RowsCacheSnapshots = []
   for (const [key, data] of matching) {
     if (!data) continue
+    if (isInfiniteRowsCache(data)) {
+      let touched = false
+      const nextPages = data.pages.map((page) => {
+        let pageTouched = false
+        const nextRows = page.rows.map((r) => {
+          const next = transform(r)
+          if (!next) return r
+          pageTouched = true
+          touched = true
+          return next
+        })
+        return pageTouched ? { ...page, rows: nextRows } : page
+      })
+      if (!touched) continue
+      snapshots.push([key, data])
+      queryClient.setQueryData<InfiniteRowsCache>(key, { ...data, pages: nextPages })
+      continue
+    }
     let touched = false
     const nextRows = data.rows.map((r) => {
       const next = transform(r)