fix(table): fix table boolean, add dynamic row number col size, fix style for search and replace

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx

@@ -153,7 +153,7 @@ function ColumnConfigBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-2'>
+      <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
         <h2 className='font-medium text-[var(--text-primary)] text-small'>Configure column</h2>
         <Button
           variant='ghost'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx

@@ -204,7 +204,11 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
     case 'boolean':
       return (
         <div
-          className={cn('flex min-h-[20px] items-center justify-center', isEditing && 'invisible')}
+          data-boolean-cell-toggle
+          className={cn(
+            'flex min-h-[20px] w-full items-center justify-center',
+            isEditing && 'invisible'
+          )}
         >
           <Checkbox size='sm' checked={kind.checked} className='pointer-events-none' />
         </div>

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

@@ -92,25 +92,18 @@ function rowSelectionCoversAll(sel: RowSelection, rows: TableRowType[]): boolean
 
 const COL_WIDTH_MIN = 80
 const COL_WIDTH_AUTO_FIT_MAX = 1000
-// Wide enough to host the row-number + per-row run button side by side.
-// Single-digit row numbers (rows 1–9) and multi-digit need to render with
-// the play button at the same x-position so the column doesn't reflow
-// row-by-row.
-//
-// Bucketed by the table's plan-derived `maxRows`, not the live count: a small
-// table sized for ≤9,999 always renders the narrow gutter; an enterprise
-// table sized up to 9,999,999 always renders the wide one. The gutter never
-// changes width as rows are added.
-//
-// Tables without workflow columns drop the per-row run button (~28px), so
-// the gutter shrinks accordingly.
-const CHECKBOX_COL_WIDTH_SMALL_WITH_RUN = 48
-const CHECKBOX_COL_WIDTH_SMALL_NUMBER_ONLY = 32
-const CHECKBOX_COL_WIDTH_LARGE_WITH_RUN = 68
-const CHECKBOX_COL_WIDTH_LARGE_NUMBER_ONLY = 52
-/** Bucket boundary: tables sized for >9,999 rows get the wide gutter. */
-const LARGE_ROW_NUMBER_THRESHOLD = 10000
 const ADD_COL_WIDTH = 120
+
+/** Returns sticky row-number column dimensions sized to the digit count of `maxRows`. */
+function checkboxColLayout(
+  maxRows: number,
+  hasWorkflowCols: boolean
+): { colWidth: number; numDivWidth: number } {
+  const digits = maxRows > 0 ? Math.floor(Math.log10(maxRows)) + 1 : 1
+  const numDivWidth = Math.max(20, digits * 8 + 4)
+  const colWidth = Math.max(32, numDivWidth + 8) + (hasWorkflowCols ? 16 : 0)
+  return { colWidth, numDivWidth }
+}
 const SKELETON_COL_COUNT = 4
 const SKELETON_ROW_COUNT = 10
 const ROW_HEIGHT_ESTIMATE = 35
@@ -128,7 +121,7 @@ const CELL_HEADER_CHECKBOX =
 const CELL_CONTENT =
   'relative flex h-[22px] min-w-0 items-center overflow-clip text-ellipsis whitespace-nowrap text-small'
 const SELECTION_OVERLAY =
-  'pointer-events-none absolute -top-px -right-px -bottom-px -left-px z-[5] border-[2px] border-[var(--selection)]'
+  'pointer-events-none absolute -top-px -right-px -bottom-px z-[5] border-[2px] border-[var(--selection)]'
 
 /**
  * Snapshot of grid selection state the wrapper needs to render `<TableActionBar>`.
@@ -452,22 +445,10 @@ export function TableGrid({
   }, [columns, columnOrder, tableWorkflowGroups])
 
   const hasWorkflowColumns = columns.some((c) => !!c.workflowGroupId)
-  /**
-   * The sticky left column hosts the row number / checkbox always, plus a
-   * per-row run button only when the table has workflow columns. Width is
-   * picked from the table's plan-derived `maxRows` so a free-tier table
-   * (≤9,999) gets the narrow gutter and an enterprise table (up to
-   * 9,999,999) gets the wide one. Bucketed, not continuous, so the gutter
-   * never reflows as rows are added.
-   */
-  const isLargeRowCountTable = (tableData?.maxRows ?? 0) >= LARGE_ROW_NUMBER_THRESHOLD
-  const checkboxColWidth = isLargeRowCountTable
-    ? hasWorkflowColumns
-      ? CHECKBOX_COL_WIDTH_LARGE_WITH_RUN
-      : CHECKBOX_COL_WIDTH_LARGE_NUMBER_ONLY
-    : hasWorkflowColumns
-      ? CHECKBOX_COL_WIDTH_SMALL_WITH_RUN
-      : CHECKBOX_COL_WIDTH_SMALL_NUMBER_ONLY
+  const { colWidth: checkboxColWidth, numDivWidth } = checkboxColLayout(
+    tableData?.maxRows ?? 0,
+    hasWorkflowColumns
+  )
 
   const headerGroups = useMemo(
     () => buildHeaderGroups(displayColumns, tableWorkflowGroups),
@@ -3053,7 +3034,7 @@ export function TableGrid({
                         onRowToggle={handleRowToggle}
                         runningCount={runningByRowId.get(row.id) ?? 0}
                         hasWorkflowColumns={hasWorkflowColumns}
-                        isLargeRowCountTable={isLargeRowCountTable}
+                        numDivWidth={numDivWidth}
                         onStopRow={onStopRow}
                         onRunRow={handleRunRow}
                         workflowGroups={tableWorkflowGroups}
@@ -3178,8 +3159,8 @@ interface DataRowProps {
   runningCount: number
   /** Whether the table has at least one workflow column — controls whether a run/stop icon is rendered. */
   hasWorkflowColumns: boolean
-  /** True for tables sized for >9,999 rows; widens the row-number slot to fit 5–7 digit numbers. */
-  isLargeRowCountTable: boolean
+  /** Width of the row-number inner div in px, derived from the table's maxRows digit count. */
+  numDivWidth: number
   onStopRow: (rowId: string) => void
   onRunRow: (rowId: string) => void
   /**
@@ -3239,7 +3220,7 @@ function dataRowPropsAreEqual(prev: DataRowProps, next: DataRowProps): boolean {
     prev.onRowToggle !== next.onRowToggle ||
     prev.runningCount !== next.runningCount ||
     prev.hasWorkflowColumns !== next.hasWorkflowColumns ||
-    prev.isLargeRowCountTable !== next.isLargeRowCountTable ||
+    prev.numDivWidth !== next.numDivWidth ||
     prev.onStopRow !== next.onStopRow ||
     prev.onRunRow !== next.onRunRow ||
     prev.workflowGroups !== next.workflowGroups
@@ -3281,7 +3262,7 @@ const DataRow = React.memo(function DataRow({
   onRowToggle,
   runningCount,
   hasWorkflowColumns,
-  isLargeRowCountTable,
+  numDivWidth,
   onStopRow,
   onRunRow,
   workflowGroups,
@@ -3313,20 +3294,23 @@ const DataRow = React.memo(function DataRow({
   return (
     <tr onContextMenu={(e) => onContextMenu(e, row)}>
       <td className={cn(CELL_CHECKBOX, 'cursor-pointer')}>
-        <div className='flex items-center justify-between gap-1'>
+        <div
+          className={cn(
+            'flex items-center gap-1',
+            hasWorkflowColumns ? 'justify-between' : 'justify-center'
+          )}
+        >
           <div
-            className={cn(
-              'group/checkbox flex h-[20px] shrink-0 items-center justify-end',
-              isLargeRowCountTable ? 'w-[40px]' : 'w-[20px]'
-            )}
+            className='group/checkbox flex h-[20px] shrink-0 items-center justify-center'
+            style={{ width: numDivWidth }}
             onMouseDown={(e) => {
               if (e.button !== 0) return
               onRowToggle(rowIndex, e.shiftKey)
             }}
           >
             <span
               className={cn(
-                'text-right text-[var(--text-tertiary)] text-xs tabular-nums',
+                'text-center text-[var(--text-tertiary)] text-xs tabular-nums',
                 isRowSelected ? 'hidden' : 'block group-hover/checkbox:hidden'
               )}
             >
@@ -3409,7 +3393,8 @@ const DataRow = React.memo(function DataRow({
             {isHighlighted && (isMultiCell || isRowChecked) && (
               <div
                 className={cn(
-                  '-top-px -right-px -bottom-px -left-px pointer-events-none absolute z-[4]',
+                  '-top-px -right-px -bottom-px pointer-events-none absolute z-[4]',
+                  colIndex === 0 ? 'left-0' : '-left-px',
                   SELECTION_TINT_BG,
                   isFirstRow && isTopEdge && 'top-0',
                   isTopEdge && 'border-t border-t-[var(--selection)]',
@@ -3419,7 +3404,15 @@ const DataRow = React.memo(function DataRow({
                 )}
               />
             )}
-            {isAnchor && <div className={cn(SELECTION_OVERLAY, isFirstRow && 'top-0')} />}
+            {isAnchor && (
+              <div
+                className={cn(
+                  SELECTION_OVERLAY,
+                  colIndex === 0 ? 'left-0' : '-left-px',
+                  isFirstRow && 'top-0'
+                )}
+              />
+            )}
             <div className={CELL_CONTENT}>
               <CellContent
                 value={

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx

@@ -678,7 +678,7 @@ function WorkflowSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-2'>
+      <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
         <h2 className='font-medium text-[var(--text-primary)] text-small'>
           {titleByMode[config.mode]}
         </h2>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx

@@ -72,7 +72,8 @@ const FOLDER_OVERRIDES: SelectorOverrides = {
   },
 }
 
-const WORKFLOW_SEARCH_CURRENT_MATCH_CLASS = 'rounded-md bg-orange-400 px-1 py-0.5'
+const WORKFLOW_SEARCH_HIGHLIGHT_CLASS =
+  'rounded-sm bg-orange-400 shadow-[3px_0_0_#fb923c,-3px_0_0_#fb923c]'
 
 /**
  * Interface for wand control handlers exposed by sub-block inputs
@@ -253,7 +254,7 @@ const renderLabel = (
     <div className='flex items-center justify-between gap-1.5 pl-0.5'>
       <Label className='flex items-baseline gap-1.5 whitespace-nowrap'>
         {isSearchHighlighted ? (
-          <mark className={WORKFLOW_SEARCH_CURRENT_MATCH_CLASS}>{config.title}</mark>
+          <mark className={WORKFLOW_SEARCH_HIGHLIGHT_CLASS}>{config.title}</mark>
         ) : (
           config.title
         )}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx

@@ -11,7 +11,8 @@ import type { ConnectedBlock } from '../../hooks/use-block-connections'
 import { useSubflowEditor } from '../../hooks/use-subflow-editor'
 import { ConnectionBlocks } from '../connection-blocks'
 
-const WORKFLOW_SEARCH_CURRENT_MATCH_CLASS = 'rounded-md bg-orange-400 px-1 py-0.5'
+const WORKFLOW_SEARCH_HIGHLIGHT_CLASS =
+  'rounded-sm bg-orange-400 shadow-[3px_0_0_#fb923c,-3px_0_0_#fb923c]'
 
 interface SubflowEditorProps {
   currentBlock: BlockState
@@ -93,7 +94,7 @@ export function SubflowEditor({
           >
             <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {isTypeHighlighted ? (
-                <mark className={WORKFLOW_SEARCH_CURRENT_MATCH_CLASS}>
+                <mark className={WORKFLOW_SEARCH_HIGHLIGHT_CLASS}>
                   {currentBlock.type === 'loop' ? 'Loop Type' : 'Parallel Type'}
                 </mark>
               ) : currentBlock.type === 'loop' ? (
@@ -128,7 +129,7 @@ export function SubflowEditor({
           >
             <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {isConfigHighlighted ? (
-                <mark className={WORKFLOW_SEARCH_CURRENT_MATCH_CLASS}>
+                <mark className={WORKFLOW_SEARCH_HIGHLIGHT_CLASS}>
                   {isCountMode
                     ? `${currentBlock.type === 'loop' ? 'Loop' : 'Parallel'} Iterations`
                     : isConditionMode

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/replacement-controls.tsx

@@ -32,30 +32,28 @@ export function ReplacementControls({
 }: ReplacementControlsProps) {
   return (
     <div className='space-y-2'>
-      <div className='space-y-1.5'>
-        {usesResourceReplacement ? (
-          <Combobox
-            options={compatibleResourceOptions.map((option) => ({
-              label: option.label,
-              value: option.value,
-            }))}
-            value={replacement}
-            onChange={onReplacementChange}
-            placeholder='Choose replacement...'
-            searchable
-            searchPlaceholder='Search resources...'
-            emptyMessage='No valid replacements available'
-            disabled={disabled || compatibleResourceOptions.length === 0}
-          />
-        ) : (
-          <Input
-            value={replacement}
-            placeholder='Replace'
-            disabled={disabled}
-            onChange={(event) => onReplacementChange(event.target.value)}
-          />
-        )}
-      </div>
+      {usesResourceReplacement ? (
+        <Combobox
+          options={compatibleResourceOptions.map((option) => ({
+            label: option.label,
+            value: option.value,
+          }))}
+          value={replacement}
+          onChange={onReplacementChange}
+          placeholder='Choose replacement...'
+          searchable
+          searchPlaceholder='Search resources...'
+          emptyMessage='No valid replacements available'
+          disabled={disabled || compatibleResourceOptions.length === 0}
+        />
+      ) : (
+        <Input
+          value={replacement}
+          placeholder='Replace'
+          disabled={disabled}
+          onChange={(event) => onReplacementChange(event.target.value)}
+        />
+      )}
 
       <div className='flex items-center justify-between gap-2'>
         <span className='text-[var(--text-muted)] text-xs'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx

@@ -481,7 +481,7 @@ export function WorkflowSearchReplace() {
         onMouseDown={handleMouseDown}
       >
         <div className='flex min-w-0 items-center'>
-          <span className='truncate font-medium text-[var(--text-primary)] text-sm'>
+          <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
             Search and replace
           </span>
         </div>
@@ -490,8 +490,8 @@ export function WorkflowSearchReplace() {
           onMouseDown={(event) => event.stopPropagation()}
         >
           <span className='text-[var(--text-muted)] text-xs'>{matchCountLabel}</span>
-          <Button variant='ghost' className='!p-1.5 -m-1.5' onClick={close}>
-            <X className='h-[16px] w-[16px]' />
+          <Button variant='ghost' className='h-[26px] w-[26px] p-0' onClick={close}>
+            <X className='h-[14px] w-[14px]' />
           </Button>
         </div>
       </div>
@@ -504,7 +504,10 @@ export function WorkflowSearchReplace() {
           onClick={() => setIsReplaceExpanded((expanded) => !expanded)}
         >
           <ChevronRight
-            className={cn('h-4 w-4 transition-transform', isReplaceExpanded && 'rotate-90')}
+            className={cn(
+              'h-[14px] w-[14px] text-[var(--text-icon)] transition-transform',
+              isReplaceExpanded && 'rotate-90'
+            )}
           />
         </Button>
         <Input
@@ -524,15 +527,15 @@ export function WorkflowSearchReplace() {
           disabled={hydratedMatches.length === 0}
           onClick={() => handleMoveActiveMatch(-1)}
         >
-          <ChevronUp className='h-4 w-4' />
+          <ChevronUp className='h-[14px] w-[14px] text-[var(--text-icon)]' />
         </Button>
         <Button
           variant='ghost'
           className='h-8 w-8 p-0'
           disabled={hydratedMatches.length === 0}
           onClick={() => handleMoveActiveMatch(1)}
         >
-          <ChevronDown className='h-4 w-4' />
+          <ChevronDown className='h-[14px] w-[14px] text-[var(--text-icon)]' />
         </Button>
 
         {isReplaceExpanded && (