fix(web): collapse empty metrics-slide wrapper (dashboard spacing)#10
Merged
Conversation
The slide wrapper's resting height was seeded by a useLayoutEffect([]) that fires on the component's FIRST commit — but both callers render the wrapper behind a loading/mounted gate, so it isn't in the DOM yet. The one-shot effect no-ops against the missing node and (with [] deps) never re-runs, leaving the wrapper at height:auto; its inner pb-6 padding then shows as a ~24px phantom gap that pushes the machines list below the header (measured: 54px above "machines" vs 30px below = 1.8x). Seed the resting height via a callback ref instead, which fires whenever the node actually attaches regardless of how many gated renders precede it, and read heldRef (always current) so the stable callback can't go stale. This is the real root cause behind the recurring "empty slide gap" regression — prior fixes patched the detailPanel memo (a red herring) while JS never actually collapsed the wrapper. Verified via Playwright: resting 0px, open->489px->auto, close->0px; gap above "machines" == gap below == 30px (was 54 vs 30). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
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.
Promotes the single fix on
devsince today's release (PR #9) to production.What
Fixes the recurring dashboard "machines pushed down" gap. The metrics-slide wrapper's resting height was seeded by a
useLayoutEffect([])that fires on the component's first commit — but both callers render the wrapper behind aloading/mountedgate, so it isn't in the DOM yet. The one-shot effect no-ops and never re-runs, leaving the wrapper atheight: auto; its innerpb-6padding showed as a ~24px phantom gap (measured 54px above "machines" vs 30px below).Seeds the height via a callback ref instead, which fires whenever the node actually attaches regardless of gated renders. This is the true root cause behind the regression that prior fixes (which patched the
detailPanelmemo) kept missing.Verification
0px, open→489px→auto, close→0px; gap above "machines" == gap below == 30px.🤖 Generated with Claude Code