Workflows Table Row Density by Alex-Tideman · Pull Request #3285 · temporalio/ui

Alex-Tideman · 2026-04-09T03:20:05Z

Description & motivation 💭

Reduce the whitespace in the Workflows List to allow users to more quickly scan information, especially if they have configured lots of columns.

Summary

Add a table density toggle to the workflows summary table, allowing users to switch between Dense (dense rows with truncated values and short timestamps) and Comfortable (standard spacing with full values) views
Add table-dense and table-comfy icons to the Holocene icon system for the density toggle button
Extract a reusable truncateValue utility and add a persisted tableDensity store

Test plan

Verify the density toggle button appears in the workflows table toolbar, with the first time showing the FeatureTag icon (indigo dot) to draw attention to it.
Click the toggle and confirm the table switches between compact and comfy views
In Dense mode: values are truncated, timestamps use short format, row actions are smaller
In comfy mode: full values are shown with filter/copy buttons, timestamps use long format
Refresh the page and confirm the density preference persists
Verify both table-dense and table-comfy icons render correctly at various sizes

Screenshots (if applicable) 📸

Dense.ComfyQuick.mov

Design Considerations 🎨

Do we want to keep Copy and Filter icon buttons on Compact density? If so, where would they go? Yes keep.

Testing 🧪

How was this tested 👻

Manual testing
E2E tests added
Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

vercel · 2026-04-09T03:20:12Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Apr 16, 2026 3:00pm

acav-temporalio · 2026-04-09T14:35:44Z

The design team is currently doing our own table density work to make sure everything plays nice for all the various types of styles we have in our tables, as well as adjusting sizing of components within tables that will impact table row height and truncation. We definitely want to tackle this but we want to make sure we're covering all our bases so this can become a pattern across the board for all high density tables. We already have "All/Compact" and then adding a "Compact/Comfy" may start crossing some boundaries we want to care for preemptively.

Can we pause on this while the UX team wraps up our discovery and comparison and then we'll come back with a comprehensive plan for how a compact/comfy treatment will work across all tables in the UI?

This would be an excellent candidate for a UX/Eng collaborative pairing.

Noting some things that this would cover:

row height
row width
truncation and inline button access
timestamp format (? overrides user-chosen timestamp format?)

temporal-cicd · 2026-04-13T15:21:10Z

@@ -71,6 +72,7 @@
          workflowId={workflow.id}


⚠️ 'workflow' is possibly 'undefined'.

⚠️ Type 'string | undefined' is not assignable to type 'string'.

temporal-cicd · 2026-04-13T15:21:10Z

@@ -71,6 +72,7 @@
          workflowId={workflow.id}
          taskQueue={workflow.taskQueue}


⚠️ 'workflow' is possibly 'undefined'.

temporal-cicd · 2026-04-13T15:21:10Z

+            class={$tableDensity === 'compact' ? 'mt-1 h-5 w-5' : ''}
          >
            <Tooltip
              text={childrenShown


⚠️ Argument of type '{ count: number | undefined; }' is not assignable to parameter of type 'I18nReplace'.

temporal-cicd · 2026-04-13T15:21:13Z

	Warnings
⚠️	📊 Strict Mode: 12 errors in 3 files (1.1% of 1062 total) src/lib/components/workflow/workflows-summary-configurable-table/table-body-cell.svelte (1) L190:8: Type 'string \| undefined' is not assignable to type 'string'. src/lib/components/workflow/workflows-summary-configurable-table/table-row.svelte (7) L38:4: Type 'string \| undefined' is not assignable to type 'string \| number'. L70:17: 'workflow' is possibly 'undefined'. L71:22: 'workflow' is possibly 'undefined'. L72:10: Type 'string \| undefined' is not assignable to type 'string'. L72:21: 'workflow' is possibly 'undefined'. L73:24: 'workflow' is possibly 'undefined'. L87:50: Argument of type '{ count: number \| undefined; }' is not assignable to parameter of type 'I18nReplace'. src/lib/components/workflow/workflows-summary-configurable-table.svelte (4) L78:56: Argument of type 'string \| null' is not assignable to parameter of type 'string \| undefined'. L117:9: Type '(workflow: WorkflowExecution) => Promise' is not assignable to type '(workflow?: WorkflowExecution \| undefined) => void'. L125:15: Object is possibly 'undefined'. L136:8: '$$_etatSytpmEelbaT2.$$slot_def' is of type 'unknown'.

Generated by 🚫 dangerJS against ad9b314

…ither side for better readability

temporal-cicd · 2026-04-13T17:27:53Z

@@ -74,6 +77,13 @@
  };



⚠️ Argument of type 'string | null' is not assignable to parameter of type 'string | undefined'.

…rkers list page

…o allow for a little more space

laurakwhit · 2026-04-15T21:46:48Z

  <td
-    class="workflows-summary-table-body-cell filterable"
+    class="workflows-summary-table-body-cell"
+    class:filterable={!truncate}


If there aren't a lot of columns in the table, the filter and copy buttons can get super far away from the actually cell data. Wondering if it would look at all better to make them stick close to the end of the text?

Yeah was thinking about this, but if you don't have many columns, you aren't going to use Dense mode. I don't want to add a bunch of complexity here when its not really the point of the mode to use when you just have a couple of columns.

temporal-cicd · 2026-04-16T14:35:46Z

+          <TableBodyCell {workflow} {column} truncate={dense} />
        {/each}
      </TableRow>
      {#if childrenActive(workflow)}


⚠️ Object is possibly 'undefined'.

temporal-cicd · 2026-04-16T15:00:24Z

@@ -165,6 +190,7 @@
        attribute={label}


⚠️ Type 'string | undefined' is not assignable to type 'string'.

Auto-generated version bump from 2.48.3 to 2.48.4 Specific version: 2.48.4 Changes included: - [`7cf1be53`](7cf1be5) Adjust breadcrumb spacing and min-height (#3304) - [`c9834815`](c983481) Add missing Nexus Operation events to event groups (#3309) - [`5c7aa86c`](5c7aa86) feat: add onItemsChange callback to PaginatedTable (#3300) - [`66d3cf68`](66d3cf6) Update pre-release badge to secondary in Workers (#3310) - [`393e84de`](393e84d) Keep Pending Activities/Operations at the top of Timeline and Compact view (#3307) - [`9f721347`](9f72134) Update error link in codec-server-error-banner (#3313) - [`e698bda3`](e698bda) Add class prop to BottomNav component (#3314) - [`55767fc9`](55767fc) Add overrides (#3317) - [`256cd274`](256cd27) refactor(decode-payload): clean up decode-payload.ts API surface (#3302) - [`04f8c251`](04f8c25) Make input height full so its easier to click into the input (#3318) - [`b2231056`](b223105) Workflows Table Row Density (#3285) - [`0b2ce4fd`](0b2ce4f) PR Review Notifications (#3322) - [`84618196`](8461819) feat: serverless worker deployment CRUD (#3236) Co-authored-by: rossnelson <146089+rossnelson@users.noreply.github.com>

Alex-Tideman added 2 commits April 8, 2026 22:10

Add table-compact and table-comfy icons for table density toggle

873b891

Export truncate value and truncate custom sa keywords/text

7d3bcf2

Alex-Tideman requested a review from a team as a code owner April 9, 2026 03:20

Alex-Tideman added the DESIGN FEEDBACK REQUESTED label Apr 9, 2026

Alex-Tideman requested review from laurakwhit and rossedfort April 9, 2026 13:10

Alex-Tideman added 2 commits April 13, 2026 10:05

Use dense not compact

2d185ae

Merge branch 'main' into workflows-row-compact

eb80116

temporal-cicd Bot reviewed Apr 13, 2026

View reviewed changes

vercel Bot deployed to Preview April 13, 2026 15:21 View deployment

Remove rounded corners from table-dense and table-comfy icons

3e3df40

vercel Bot deployed to Preview April 13, 2026 16:53 View deployment

Truncate more fields, exand the truncateValue to include 6 chars on e…

02595b2

…ither side for better readability

vercel Bot deployed to Preview April 13, 2026 17:27 View deployment

temporal-cicd Bot reviewed Apr 13, 2026

View reviewed changes

Alex-Tideman added 2 commits April 13, 2026 13:55

Merge branch 'main' into workflows-row-compact

105732d

Fix truncate issue with filter/copy buttons, use truncateValue for wo…

ffb8faf

…rkers list page

vercel Bot deployed to Preview April 13, 2026 21:37 View deployment

Truncate to 7 characts, make copy/filter buttons w-6 instead of w-7 t…

ccb427e

…o allow for a little more space

Alex-Tideman removed the DESIGN FEEDBACK REQUESTED label Apr 14, 2026

laurakwhit reviewed Apr 15, 2026

View reviewed changes

PR review updates

3638466

vercel Bot deployed to Preview April 16, 2026 14:35 View deployment

temporal-cicd Bot reviewed Apr 16, 2026

View reviewed changes

Change to dense instead of compact

873e969

vercel Bot deployed to Preview April 16, 2026 14:43 View deployment

Alex-Tideman requested a review from laurakwhit April 16, 2026 14:45

Hide tooltip on all other cells if length is less than TRUNCATE_LENGTH

ad9b314

temporal-cicd Bot reviewed Apr 16, 2026

View reviewed changes

vercel Bot deployed to Preview April 16, 2026 15:00 View deployment

laurakwhit approved these changes Apr 16, 2026

View reviewed changes

Alex-Tideman merged commit b223105 into main Apr 16, 2026
19 checks passed

Alex-Tideman deleted the workflows-row-compact branch April 16, 2026 21:07

temporal-cicd Bot mentioned this pull request Apr 20, 2026

chore: bump version to 2.48.4 #3324

Merged

		@@ -71,6 +72,7 @@
		workflowId={workflow.id}
		taskQueue={workflow.taskQueue}

Conversation

Alex-Tideman commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description & motivation 💭

Summary

Test plan

Screenshots (if applicable) 📸

Design Considerations 🎨

Testing 🧪

How was this tested 👻

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

Uh oh!

vercel Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

acav-temporalio commented Apr 9, 2026

Uh oh!

temporal-cicd Bot Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

temporal-cicd Bot Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

temporal-cicd Bot Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

temporal-cicd Bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

temporal-cicd Bot Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

laurakwhit Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Alex-Tideman Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

temporal-cicd Bot Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

temporal-cicd Bot Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Alex-Tideman commented Apr 9, 2026 •

edited

Loading

vercel Bot commented Apr 9, 2026 •

edited

Loading

temporal-cicd Bot commented Apr 13, 2026 •

edited

Loading