Skip to content

feat: Add resizable columns to the workflows table. - #3685

Open
tristal wants to merge 3 commits into
temporalio:mainfrom
tristal:tristal/column-width
Open

tristal wants to merge 3 commits into
temporalio:mainfrom
tristal:tristal/column-width

Conversation

@tristal

@tristal tristal commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Description & motivation 💭

The workflows table has no way to control column widths. Columns autosize to their content, and the only lever is the dense/comfortable toggle.

This adds drag-to-resize on the workflows table header:

  • Drag the divider at the right edge of any column header to set its width.
  • Widths persist per-namespace in the existing column config (localStorage), alongside label/order/pinned.
  • Double-click a divider to return that column to autosizing. A reset button appears next to the density toggle once any column is resized, to clear all widths.
  • Keyboard accessible: tab to a divider, arrow keys resize in 16px steps, Enter/Space resets. Minimum width 80px.

Screenshots (if applicable) 📸

2-widened 3-shrunk

Design Considerations 🎨

  • Dividers are invisible at rest so the table looks unchanged; hovering the header row reveals them all as subtle 1px lines (discoverability), and the divider under the cursor thickens to 2px in the accent color.

Testing 🧪

How was this tested 👻

  • Manual testing
  • E2E tests added
  • Unit tests added

Docs

Any docs updates needed?

@tristal
tristal requested a review from a team as a code owner July 17, 2026 00:05
@vercel

vercel Bot commented Jul 17, 2026

Copy link
Copy Markdown

@tristal is attempting to deploy a commit to the Temporal Team on Vercel.

A member of the Team first needs to authorize it.

@bilal-karim

bilal-karim commented Jul 20, 2026

Copy link
Copy Markdown
Member

This is a great addition. Thanks for creating this PR. I did add a few more updates:

  • Added role="separator" with live aria-valuenow/aria-valuemin/aria-valuetext so the resize width is announced to Screen Readers.
  • Esc on keyboard now cancels an in-progress drag and reverts to the pre-drag width.
  • Focus ring switched to the app-standard ring-2 ring-primary, using ring-inset to avoid clipping in the sticky header.
  • Changed the hover divider color from bg-subtle to border-secondary for better contrast.
  • Divider is now a fixed 16px that grows to 24px on hover/focus/drag with an eased transition for better hover interaction.

rossedfort added a commit that referenced this pull request Sep 17, 2026
* feat(tables): add resizable columns to configurable tables (FE-734)

Adds drag-to-resize handles to the header of every configurable table
(workflows, schedules, activities, deployments, nexus operations).
Widths persist per namespace alongside label/order in the existing
column config, clamped to an 80px minimum.

Based on #3685, generalized from the workflows table to all five
configurable tables.

* fix(tables): stop column resize keys from paginating the table

The resize handle called preventDefault on the keys it consumes but let
them keep bubbling. Both pagination components listen for ArrowLeft and
ArrowRight on window, so nudging a column width also changed the page
whenever the table had more than one page of results.

* style(tables): show column dividers at rest

The dividers were transparent until the header row was hovered, so the
only hint that a column could be resized was finding the cursor change
at its edge. They now sit at 1px in border-primary, matching the header
rule above them, and thicken to 2px in border-brand on hover, keyboard
focus or an active drag.

The last column keeps its handle but not its resting line, which would
otherwise float at the table's right edge with no column beside it.

* fix(badge): keep status badges inside their container

A status badge sized itself to its text and ignored the width of what
it sat in, so an 80px Status column clipped the pill mid-word and the
cell's own text-overflow painted a stray ellipsis beside it.

The badge now caps at the available width and truncates its label
inside the pill, so the shape and colour that carry the status survive
the squeeze. Icon segments keep their intrinsic size, so the word gives
way before a delayed or task-failure marker does.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants