fix(editor): keep workflow name visible on small screens + responsive toolbar tooltips#252
Merged
Merged
Conversation
The header title wrapper used `hidden sm:block min-w-0` with no flex claim, so on narrow screens the shrink-0 button group squeezed it to ~0 width and the workflow name disappeared. Give the wrapper `flex-1`, let the title fill available width and truncate (dropping fixed tiny max-widths), cap the inline edit input so a long name can't overflow the header, and add a title tooltip. Add a Playwright test asserting the name stays visible, within the viewport, and truncated at a 380px viewport. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…me visible On constrained widths the action toolbar's ~10 text labels consumed the whole header row, squeezing the workflow name to 0px (measured) and clipping it. - Defer toolbar text labels to >=1600px so screens that already fit keep their labels unchanged; below that, buttons collapse to icons so the name has room. - Add a reusable portal-based Tooltip (radix-vue) and wrap the toolbar icon buttons so hovering reveals each action's name (works regardless of header overflow clipping). - Give the title flex-1/min-w-0 + truncate so it always claims available space. - Hide the two secondary icon buttons (Edit History, Page Guide) below `sm` so the name stays visible on phones (verified ~88px at 380px vs 0 before). Verified live across 380/1280/1433/1599/1700px: name visible at every width, labels return at >=1600px, no toolbar clipping, tooltips appear on hover. Extend the Playwright workflow spec with label-collapse and tooltip coverage. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The icon-only toolbar buttons lost their accessible names when labels collapse
below 1600px, breaking the import/export E2E test (which finds the Download
button via getByRole name) and degrading accessibility.
Add aria-label to every toolbar button so they keep a stable accessible name
regardless of whether the text label is visible. Verified live that
getByRole("button", { name: "Download" }) resolves at the 1280px CI viewport.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On smaller / common laptop widths the editor's workflow name disappeared. Measured at 1433px: the action toolbar (full text labels for ~10 buttons) was 1273px wide, leaving 0px for the title — which then got clipped by the header's
overflow-x-hidden.flex-1alone couldn't help because there was no leftover space to claim.Fix
min-[1600px]— screens that already fit (≥1600px) keep their labels exactly as before; below that the buttons collapse to icons so the name has room.Tooltipcomponent (ui/Tooltip.vue, radix-vue, portal-based so it isn't clipped by the header overflow). The toolbar icon buttons are wrapped so hovering reveals each action's name.flex-1 min-w-0 truncate(dropped the tiny fixed max-widths) and atitletooltip with the full name.smso the name stays visible (≈88px at 380px vs 0 before).<input>width capped so a long name can't overflow the header.Verification (live, measured across widths)
Tooltip popups confirmed appearing on hover; no toolbar clipping at any width (Save always within viewport).
Tests
Extended
frontend/e2e/tab-workflows.spec.ts:shows the workflow name without overflow on small screens— name visible, within viewport, truncated; inline-edit input within bounds.collapses toolbar labels to icons when tight and keeps them when wide, with tooltips— labels visible at 1700px, hidden at 1280px, and a hover tooltip popup appears.Run:
./run_e2e.sh tab-workflows.spec.tsChecks
bun run typecheck✅bun run lint✅🤖 Generated with Claude Code