fix(apollo-react): shrink NodeToolbar to fit a single action [MST-9559]#690
Merged
Conversation
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
This PR adjusts the canvas NodeToolbar sizing behavior so a single-action toolbar can shrink on its main axis (removing trailing empty space), while still maintaining a consistent 40px minimum on the cross-axis for predictable positioning offsets. It also adds a dedicated Storybook story to validate the single-action layout across positions/alignments.
Changes:
- Move the
min-h-10/min-w-10constraints from the shared container class into orientation-specific classes (cross-axis only). - Update the NodeToolbar Storybook controls to use
Row wrap="wrap"and Tailwind font classes instead of inline styles. - Add a “Single-action Toolbar” Storybook story that exercises the breakpoint-only scenario.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx | Makes toolbar main-axis size content-driven while keeping a 40px cross-axis minimum per orientation. |
| packages/apollo-react/src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.stories.tsx | Adds a single-action coverage story and small Storybook control layout cleanup. |
154729c to
bbe14b1
Compare
bbe14b1 to
2408c79
Compare
snuziale
approved these changes
May 15, 2026
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
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.
Summary
NodeToolbarhad a 40px floor on both axes, so a single-action toolbar (24px icon + 8px padding = 32px) was padded out to 40px wide, leaving empty space on the right (visible in canvas debug mode when only Breakpoint is shown).SingleActionStorybook story covering the scenario.Demo
Screen.Recording.2026-05-13.at.12.40.39.mov
Ticket: MST-9559
Test plan
Components/NodeToolbar/Single-action Toolbar— toolbar fits the icon with no trailing empty space across all 4 positions and 3 alignments.Components/NodeToolbar/Default Toolbar— multi-action toolbar unchanged.