improvement(workspace): fix resource table column proportions and toast stacking (#4655)

* improvement(workspace): fix resource table column proportions and toast stacking

* fix(resource): restore scrollbar-gutter stable on table scroll container

* fix(resource): remove scrollbar-gutter stable — single-table layout doesn't need it

* fixed files cols

* fix(findymail): add required enabled field to wandConfig entries

* fix(findymail): remove optional from block outputs — not valid on BlockConfig output type

* fixes

* fix(files): use folderSizeMap for sort value so size sort matches display

* files ref

Author: waleedlatif1

apps/docs/components/ui/icon-mapping.ts

@@ -263,7 +263,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   extend_v2: ExtendIcon,
   fathom: FathomIcon,
   file: DocumentIcon,
-  file_v3: DocumentIcon,
   file_v4: DocumentIcon,
   findymail: FindymailIcon,
   firecrawl: FirecrawlIcon,

apps/docs/content/docs/de/tools/file.mdx

@@ -6,7 +6,7 @@ description: Mehrere Dateien lesen und parsen
 import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
-  type="file_v3"
+  type="file_v4"
   color="#40916C"
 />
 

apps/docs/content/docs/en/tools/prospeo.mdx

@@ -229,9 +229,9 @@ Free endpoint to retrieve valid location or job title values for use in Search f
 
 | Parameter | Type | Description |
 | --------- | ---- | ----------- |
-| `location_suggestions` | array | Location suggestions when using location_search \(null when searching job titles\) |
+| `location_suggestions` | array | Location suggestions when using location_search \(empty when searching job titles\) |
 |   ↳ `name` | string | Formatted location name to use in filters |
 |   ↳ `type` | string | Location type \(COUNTRY, STATE, CITY, or ZONE\) |
-| `job_title_suggestions` | array | Up to 25 job title suggestions ordered by popularity when using job_title_search \(null when searching locations\) |
+| `job_title_suggestions` | array | Up to 25 job title suggestions ordered by popularity when using job_title_search \(empty when searching locations\) |
 
 

apps/docs/content/docs/es/tools/file.mdx

@@ -6,7 +6,7 @@ description: Leer y analizar múltiples archivos
 import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
-  type="file_v3"
+  type="file_v4"
   color="#40916C"
 />
 

apps/docs/content/docs/fr/tools/file.mdx

@@ -6,7 +6,7 @@ description: Lire et analyser plusieurs fichiers
 import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
-  type="file_v3"
+  type="file_v4"
   color="#40916C"
 />
 

apps/docs/content/docs/ja/tools/file.mdx

@@ -6,7 +6,7 @@ description: 複数のファイルを読み込んで解析する
 import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
-  type="file_v3"
+  type="file_v4"
   color="#40916C"
 />
 

apps/docs/content/docs/zh/tools/file.mdx

@@ -6,7 +6,7 @@ description: 读取并解析多个文件
 import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
-  type="file_v3"
+  type="file_v4"
   color="#40916C"
 />
 

apps/sim/app/_styles/globals.css

@@ -878,22 +878,22 @@ input[type="search"]::-ms-clear {
 @keyframes toast-enter {
   from {
     opacity: 0;
-    transform: translateY(8px) scale(0.97);
+    transform: translateX(var(--stack-offset, 0px)) translateY(8px) scale(0.97);
   }
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateX(var(--stack-offset, 0px)) translateY(0) scale(1);
   }
 }
 
 @keyframes toast-exit {
   from {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateX(var(--stack-offset, 0px)) translateY(0) scale(1);
   }
   to {
     opacity: 0;
-    transform: translateY(8px) scale(0.97);
+    transform: translateX(var(--stack-offset, 0px)) translateY(8px) scale(0.97);
   }
 }
 

apps/sim/app/workspace/[workspaceId]/components/index.ts

@@ -25,4 +25,4 @@ export type {
   RowDragDropConfig,
   SelectableConfig,
 } from './resource/resource'
-export { Resource, ResourceTable } from './resource/resource'
+export { EMPTY_CELL_PLACEHOLDER, Resource, ResourceTable } from './resource/resource'

apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx

@@ -23,8 +23,6 @@ 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 {
@@ -94,7 +92,7 @@ interface ResourceProps {
   overlay?: ReactNode
 }
 
-const EMPTY_CELL_PLACEHOLDER = '-  -  -'
+export const EMPTY_CELL_PLACEHOLDER = '—'
 const SKELETON_ROW_COUNT = 5
 
 /**
@@ -214,20 +212,13 @@ export const ResourceTable = memo(function ResourceTable({
   emptyMessage,
   overlay,
 }: ResourceTableProps) {
-  const headerRef = useRef<HTMLDivElement>(null)
   const loadMoreRef = useRef<HTMLDivElement>(null)
   const sortEnabled = defaultSort != null
   const [internalSort, setInternalSort] = useState<{ column: string; direction: 'asc' | 'desc' }>({
     column: defaultSort ?? '',
     direction: 'desc',
   })
 
-  const handleBodyScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-    if (headerRef.current) {
-      headerRef.current.scrollLeft = e.currentTarget.scrollLeft
-    }
-  }, [])
-
   const handleSort = useCallback((column: string, direction: 'asc' | 'desc') => {
     setInternalSort({ column, direction })
   }, [])
@@ -290,10 +281,10 @@ export const ResourceTable = memo(function ResourceTable({
 
   return (
     <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
-      <div ref={headerRef} className='overflow-hidden'>
+      <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
-          <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
+          <thead className='sticky top-0 z-10 bg-[var(--bg)] shadow-[inset_0_-1px_0_var(--border)]'>
             <tr>
               {hasCheckbox && (
                 <th className='h-10 w-[52px] py-1.5 pr-0 pl-5 text-left align-middle'>
@@ -341,14 +332,6 @@ export const ResourceTable = memo(function ResourceTable({
               })}
             </tr>
           </thead>
-        </table>
-      </div>
-      <div
-        className='min-h-0 flex-1 overflow-auto [scrollbar-gutter:stable]'
-        onScroll={handleBodyScroll}
-      >
-        <table className='w-full table-fixed text-small'>
-          <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <tbody>
             {displayRows.map((row) => (
               <DataRow
@@ -644,43 +627,22 @@ interface ResourceColGroupProps {
   hasCheckbox?: boolean
 }
 
-const CHECKBOX_COLUMN_WIDTH_PX = 52
-const CHECKBOX_COLUMN_WIDTH = `${CHECKBOX_COLUMN_WIDTH_PX}px`
+const CHECKBOX_COLUMN_WIDTH = '52px'
 
 const ResourceColGroup = memo(function ResourceColGroup({
   columns,
   hasCheckbox,
 }: ResourceColGroupProps) {
-  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 weights = columns.map(
+    (col, colIdx) => (colIdx === 0 ? 2.5 : 1.0) * (col.widthMultiplier ?? 1)
   )
-  const flexibleTotal = flexibleWeights.reduce((s, w) => s + w, 0)
-  const reservedPx = fixedPxTotal + (hasCheckbox ? CHECKBOX_COLUMN_WIDTH_PX : 0)
-
+  const total = weights.reduce((s, w) => s + w, 0)
   return (
     <colgroup>
       {hasCheckbox && <col style={{ width: CHECKBOX_COLUMN_WIDTH }} />}
-      {columns.map((col, colIdx) => {
-        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 reservedOffset = reservedPx * columnRatio
-
-        return (
-          <col
-            key={col.id}
-            style={{
-              width:
-                reservedOffset > 0
-                  ? `calc(${columnPercent}% - ${reservedOffset}px)`
-                  : `${columnPercent}%`,
-            }}
-          />
-        )
-      })}
+      {columns.map((col, colIdx) => (
+        <col key={col.id} style={{ width: `${((weights[colIdx] / total) * 100).toFixed(3)}%` }} />
+      ))}
     </colgroup>
   )
 })
@@ -697,55 +659,48 @@ const DataTableSkeleton = memo(function DataTableSkeleton({
   hasCheckbox,
 }: DataTableSkeletonProps) {
   return (
-    <>
-      <div className='overflow-hidden'>
-        <table className='w-full table-fixed text-small'>
-          <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
-          <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
-            <tr>
+    <div className='min-h-0 flex-1 overflow-auto'>
+      <table className='w-full table-fixed text-small'>
+        <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
+        <thead className='sticky top-0 z-10 bg-[var(--bg)] shadow-[inset_0_-1px_0_var(--border)]'>
+          <tr>
+            {hasCheckbox && (
+              <th className='h-10 w-[52px] py-2.5 pr-0 pl-5 text-left align-middle'>
+                <Skeleton className='size-[14px] rounded-xs' />
+              </th>
+            )}
+            {columns.map((col) => (
+              <th
+                key={col.id}
+                className='h-10 px-6 py-2.5 text-left align-middle font-base text-[var(--text-muted)]'
+              >
+                <div className='flex min-h-[20px] items-center'>
+                  <Skeleton className='h-[12px] w-[56px]' />
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: rowCount }, (_, i) => (
+            <tr key={i}>
               {hasCheckbox && (
-                <th className='h-10 w-[52px] py-2.5 pr-0 pl-5 text-left align-middle'>
+                <td className='w-[52px] py-2.5 pr-0 pl-5 align-middle'>
                   <Skeleton className='size-[14px] rounded-xs' />
-                </th>
+                </td>
               )}
-              {columns.map((col) => (
-                <th
-                  key={col.id}
-                  className='h-10 px-6 py-2.5 text-left align-middle font-base text-[var(--text-muted)]'
-                >
-                  <div className='flex min-h-[20px] items-center'>
-                    <Skeleton className='h-[12px] w-[56px]' />
-                  </div>
-                </th>
+              {columns.map((col, colIdx) => (
+                <td key={col.id} className='px-6 py-2.5 align-middle'>
+                  <span className='flex min-h-[21px] items-center gap-3'>
+                    {colIdx === 0 && <Skeleton className='size-[14px] rounded-xs' />}
+                    <Skeleton className='h-[14px] w-[128px]' />
+                  </span>
+                </td>
               ))}
             </tr>
-          </thead>
-        </table>
-      </div>
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full table-fixed text-small'>
-          <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
-          <tbody>
-            {Array.from({ length: rowCount }, (_, i) => (
-              <tr key={i}>
-                {hasCheckbox && (
-                  <td className='w-[52px] py-2.5 pr-0 pl-5 align-middle'>
-                    <Skeleton className='size-[14px] rounded-xs' />
-                  </td>
-                )}
-                {columns.map((col, colIdx) => (
-                  <td key={col.id} className='px-6 py-2.5 align-middle'>
-                    <span className='flex min-h-[21px] items-center gap-3'>
-                      {colIdx === 0 && <Skeleton className='size-[14px] rounded-xs' />}
-                      <Skeleton className='h-[14px] w-[128px]' />
-                    </span>
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </>
+          ))}
+        </tbody>
+      </table>
+    </div>
   )
 })