fix: black-button text contrast + Tutorial viewport clamping#94
Merged
Conversation
Two related polish bugs: 1) Light theme had --color-text-inverse: #1a1a1a (same near-black as --color-text). Components that built a 'primary' button with bg: --color-text + color: --color-text-inverse rendered as black-on-black, invisible label. Fixed by hard-coding white (#fff) on the affected 5 surfaces (Tutorial Next, PairQueue accept, ExecutionReplay primary, ProfileSetup save + selected-thumb check stroke). Left the token alone so accent-bg consumers (MorphicTabs etc.) aren't affected. 2) Tutorial card popped below the viewport on steps whose target sat near the page bottom (and the 'Built with' last step in particular). Card position now clamps to viewport bounds — picks above/below based on available space, falls back to a bottom-pinned position when neither fits. Also adds maxHeight + overflowY:auto on the card so a future longer body can scroll without pushing the action buttons off-screen.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
kh0ra
added a commit
that referenced
this pull request
May 11, 2026
Three production fixes: 1. Service worker: disabled registration and added an active cleanup pass that unregisters any previously-installed SW and clears its CacheStorage entries on every page load. Stops the 'old bundle served from SW cache' footgun that was hiding new deploys (including the routing + button-text fixes from PR #93 + #94). Trade-off: no offline shell. Acceptable through the hackathon submission window; can be re-enabled with a versioned SW after. 2. Uppercase eyebrows / stat labels: stripped 30 'textTransform: uppercase' rules across 15 components (pages, panels, replay, tutorial, pair queue, etc.). Stat labels and eyebrows now render in the case authored in the source string ('Analytics' instead of 'ANALYTICS', 'Routed volume' instead of 'ROUTED VOLUME', etc.), per the polish ask. 3. MEV popover layer status: 'ACTIVE' / 'READY' -> 'Active' / 'Ready'.
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
Two production UI bugs reported on the live domain:
1) Black buttons had invisible labels. Light theme defined
--color-text-inverse: #1a1a1a(same near-black as--color-text). Any component usingbg: var(--color-text) + color: var(--color-text-inverse)rendered as black-on-black. Affected: Tutorial Next/Done, PairQueue accept, ExecutionReplay primary, ProfileSetup save button + selected-avatar check stroke. Hard-coded white (#ffffff) on those 5 surfaces. Left the token alone so accent-pink consumers (MorphicTabs etc.) keep their black labels.2) Tutorial card buttons disappeared at bottom step. The card naively used
rect.bottom + 16for placement, which pushed it past the viewport when the spotlighted target sat near the page bottom (the 'Built with' Step 4). Card now picks above/below based on available space, falls back to a viewport-bottom-pinned position, and clamps to viewport bounds. Also addsmaxHeight + overflowY:autoso the action buttons stay reachable even if the body grows.Verified
background: rgb(26,26,26)+color: rgb(255,255,255)