fix(NotchGrid): guarantee distinct panels never overlap at gap=0#325
Merged
Conversation
Two unrelated components (different keys, no shared groupKey, different themes) placed on touching cells rendered with their outlines overlapping by 2*panelBleed px — the later-painted panel cutting up into the one above — because panelBleed dilates every outline outward and gap=0 applies no counter-erosion. Grouping was correct (they stayed two separate chromes); the defect was purely in outline geometry (grid-outline erosion = gap/2 - bleed going negative with no inter-component protection). NotchGrid now caps each component's outward bleed at half the empty space to its nearest distinct neighbour and forces a small seam when a neighbour is flush, so distinct components always stay visually separated regardless of the gap prop. Well-separated layouts keep the full panelBleed unchanged. Bump 0.5.17; add regression test. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…t a fixed px MIN_COMPONENT_SEP was a flat 2px, imperceptible at typical block sizes and not what "leave a gap between distinct panels" actually needs. Replaced with MIN_COMPONENT_SEP_FRACTION (0.25 of one cell), so the guaranteed seam scales with the grid's live block size the same way callers already reason about spacing in cell/tile units.
Replace the per-component bleed-capping/eroding approach (computeComponentOutlines) with a position nudge (computeComponentNudges): distinct touching components get pushed apart by enough to cancel their bleed's outward dilation plus the desired MIN_COMPONENT_SEP_FRACTION seam, applied to where each component renders (its wrapper's left/top, the same mechanism already used for drag offsets) rather than varying its gap/panelBleed. Every component's own outline shape is now identical regardless of its neighbors — only its position shifts. Strengthened the regression test to also assert each panel's own outline dimensions are unchanged (proving the fix is position-only), and fixed the nudge magnitude to account for panelBleed's full outward reach (previously only offset by half the target seam, which undershot when panelBleed was nonzero).
Reflects the NotchGrid position-nudge fix (gap=0 + panelBleed distinct-panel overlap) as a minor rather than patch — the fix changed the resolved geometry of any component that touches a distinct neighbor, not just an edge case.
Contributor
|
Storybook Preview: https://mirrorstack-ai.github.io/web-ui-kit/pr/325/ |
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.
Summary
NotchGriddistinct components (different keys, no sharedgroupKey, different themes) placed on touching cells used to render with their outlines overlapping by2·panelBleedpx — the later-painted panel visually cutting into the one above it — sincepanelBleeddilates every outline outward andgap=0applies no counter-erosion.MIN_COMPONENT_SEP_FRACTION) seam, along whichever axis the pair touches on. Every component's own outline shape (gap/panelBleed) is left exactly as configured — only its position shifts.Supersedes #323 (closed — that branch picked up an unrelated commit from a concurrent session that now conflicts with
main; this branch is a clean cherry-pick of just the NotchGrid + version-bump commits off currentmain).Test plan
NotchGrid.test.tsx: two distinct-key, distinct-theme, ungrouped panels stacked flush atgap=0+panelBleed=4— asserts (a) two separate chromes, (b) a real>= 0.25*blockseam (not just non-overlapping), (c) each panel's own outline dimensions are unchanged (proving the fix is position-only, not a shape change)tsc --noEmitcleaneslintclean on touched filespnpm link-style swap — confirmed the overlap is visually gone🤖 Generated with Claude Code