Skip to content

FE-1515: Give sidebar list labels the full row width until the row menu shows - #9367

Closed
kube wants to merge 2 commits into
claude/fe-1510-canvas-single-initial-renderfrom
claude/fe-1515-sidebar-row-label-width
Closed

FE-1515: Give sidebar list labels the full row width until the row menu shows#9367
kube wants to merge 2 commits into
claude/fe-1510-canvas-single-initial-renderfrom
claude/fe-1515-sidebar-row-label-width

Conversation

@kube

@kube kube commented Aug 27, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🌟 What is the purpose of this PR?

Left-sidebar list items cropped inconsistently. Rows with a row menu always reserved space for the hidden "More options" button (it was revealed by animating opacity, which keeps its layout size), so those lists wrapped labels ~20px early — while lists without menus used the full width. And items rendering a name with a subtitle (e.g. parameters) escaped the row's ellipsis and clipped hard, while plain-text items showed "…".

Labels now take the full row width with a consistent ellipsis, and only shrink while the row is hovered (or its menu is open), when the button actually appears.

Before — space reserved for the hidden button, and name/subtitle lines hard-clip without an ellipsis:

image

After — full-width labels, consistent "…" truncation (same net, same 200px sidebar):

image

🔗 Related links

🚫 Blocked by

🔍 What does this change?

  • filterable-list-sub-view.tsx hides [data-row-action] with display: none instead of opacity: 0, revealing it on row hover or while its menu is open — the hidden button no longer occupies layout.
  • listItemNameStyle applies its truncation (nowrap, hidden overflow, ellipsis) to nested item lines as well, so name + subtitle renderers truncate like plain-text ones.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

The user guide does not describe row-menu reveal behaviour.

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

  • do not affect the execution graph

⚠️ Known issues

  • The 150ms fade/slide reveal animation is gone — display cannot transition, so the button appears instantly. A @starting-style fade can be added later if the pop feels abrupt.
  • While hidden, the button is no longer in the tab order (display: none). Previously it was tab-focusable but invisible, which was not meaningfully more accessible.

🛡 What tests cover this?

  • None — CSS-only. Verified in the running app: button computes display: none by default and the label content spans the full row (244px of a 256px row); forcing the menu-open state (the same rule as :hover) shows the 20px button and shrinks the content to 224px; nested name and <pre> subtitle lines compute nowrap / ellipsis / hidden.

❓ How to test this?

  1. yarn workspace @hashintel/petrinaut dev, open a story with parameters (e.g. Handle Spike With Sir), narrow the left sidebar.
  2. Long labels truncate with "…" and reach the row's right edge; name and subtitle lines truncate alike.
  3. Hover a row: the "⋯" button appears and the label shortens; unhover with the menu open: the button stays.

🤖 Generated with Claude Code

@vercel

vercel Bot commented Aug 27, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
hash Ready Ready Preview Aug 27, 2026 12:05pm
petrinaut Ready Ready Preview Aug 27, 2026 12:05pm
petrinaut-docs Ready Ready Preview Aug 27, 2026 12:05pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
hashdotdesign-tokens Ignored Ignored Preview Aug 27, 2026 12:05pm

Request Review

@kube kube self-assigned this Aug 27, 2026
@github-actions github-actions Bot added area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Aug 27, 2026
kube added 2 commits August 27, 2026 13:54
@kube
Place arc weight labels on the Adaptive Bezier curve
a5ad4f4 
The Adaptive Bezier renderer put weight labels at the straight-line
midpoint between the arc's endpoints, despite a comment claiming the
bezier midpoint. Long arcs sweep far from that line, leaving the label
floating in empty space. The label now uses the cubic bezier point at
t = 0.5: (P0 + 3*CP1 + 3*CP2 + P3) / 8.
@kube
Give sidebar list labels the full row width until the row menu shows
3f1e2fc 
Rows revealed their action button by animating opacity, so the hidden
button always reserved its layout space: lists with row menus wrapped
labels earlier than lists without, and the space was wasted until hover.
The button is now hidden with display, so labels take the full row width
and only shrink while the row is hovered or its menu is open.

Item content rendered as nested lines (a name with a subtitle) escaped
the row's ellipsis and clipped hard; nested lines now truncate the same
way plain-text items do.
@kube
kube force-pushed the claude/fe-1515-sidebar-row-label-width branch from 9801846 to 3f1e2fc Compare August 27, 2026 11:54
@kube
kube requested a review from CiaranMn August 27, 2026 12:19
@kube
kube marked this pull request as ready for review August 27, 2026 12:19
@cursor

cursor Bot commented Aug 27, 2026 •
edited
Loading

Copy link
Copy Markdown

PR Summary

Low Risk
CSS-only layout and truncation in a shared left-sidebar list component; no auth, data, or API changes.

Overview
Left sidebar filterable list rows no longer reserve ~20px for a hidden “More options” control. Row actions are toggled with display: none / display: flex on hover or when the menu is open instead of fading in via opacity, so labels use the full row width until the button actually appears. The previous opacity/slide animation on the ellipsis icon is removed.

Label truncation is aligned for plain text and custom renderItem content (e.g. name + subtitle): listItemNameStyle adds minWidth: 0 and applies ellipsis/nowrap to nested descendants so long lines show “…” instead of hard clipping.

Includes a patch changeset for @hashintel/petrinaut.

Reviewed by Cursor Bugbot for commit 3f1e2fc. Bugbot is set up for automated code reviews on this repo. Configure here.

@kube
kube requested a review from YannisZa August 27, 2026 12:19
@kube
kube added this pull request to the merge queue Aug 27, 2026
Base automatically changed from claude/fe-1512-adaptive-bezier-label-midpoint to claude/fe-1510-canvas-single-initial-render August 27, 2026 12:50
@kube
kube deleted the branch claude/fe-1510-canvas-single-initial-render August 27, 2026 12:50
@kube kube closed this Aug 27, 2026
@github-merge-queue
github-merge-queue Bot removed this pull request from the merge queue due to a manual request Aug 27, 2026
@kube kube mentioned this pull request Aug 27, 2026
Merged
4 tasks

This branch was successfully deployed

3 active deployments
Preview – hash — 3f1e2fcb Deployed Aug 27, 2026 by vercel[bot]
View deployment
Preview – petrinaut — 3f1e2fcb Deployed Aug 27, 2026 by vercel[bot]
View deployment
Preview – petrinaut-docs — 3f1e2fcb Deployed Aug 27, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@YannisZa YannisZa YannisZa approved these changes
@CiaranMn CiaranMn Awaiting requested review from CiaranMn

Assignees

@kube kube

Labels

area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@kube @YannisZa