Fix visualiser node icon spacing in full mode#2117
Merged
Conversation
Add conditional bottom margins to node icons (mb-2 in full mode, mb-1 in simple mode) and increase label margins from mb-4 to mb-6 for longer labels (Channel, Command, Service, Data Product) to prevent overlap with rotated text in full mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 8d3f052 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
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.
What This PR Does
Fixes visual spacing issues in the visualiser package where node icons and rotated labels were overlapping or too close to borders in full mode. The Event node had proper spacing, but Channel, Command, Service, and Data Product nodes had their labels crushed against the bottom edge.
Changes Overview
Key Changes
mb-2in full mode,mb-1in simple modemb-4tomb-6for nodes with longer labels (Channel, Command, Service, Data Product)How It Works
The fix addresses two spacing issues:
Icon bottom margin: Icons now have conditional spacing based on display mode. In full mode (
mb-2), there's more space between the icon and the rotated label below it. In simple mode (mb-1), minimal spacing is maintained.Label bottom margin: Nodes with longer rotated text labels (7+ characters like "CHANNEL", "COMMAND", "SERVICE", "PRODUCT") needed extra bottom padding to prevent the text from being cut off or pressed against the edge. These were increased from
mb-4tomb-6.The EventNode already had good spacing naturally due to its shorter label ("EVENT" - 5 chars), so it serves as the reference implementation. All other nodes now match this spacing pattern.
Breaking Changes
None
Additional Notes
This is a visual-only fix with no behavioral changes. The spacing improvements make the full mode node display more readable and professional-looking across all node types.