Bugfix - Resolve breadcrumbs dark-mode hover visibility report on the house-style branch - #755
Closed
markmead wants to merge 3 commits into
Closed
Conversation
…overs-application-try3kc
…bs hover investigation Regenerates public/component.css so it reflects the merged-in #754 fix (explicit dark:bg-* on every -dark.html <body>). Documents the investigation into the reported "breadcrumbs hover text becomes invisible" bug in HOUSE_STYLE_PLAN.md: the dark:hover: cascade itself was already correct, the missing standalone dark background was the actual cause, and merging main resolves it.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
hyperui | d3e750e | Commit Preview URL Branch Preview URL |
Aug 31 2026, 03:02 PM |
…ariant-hovers-application-try3kc
Owner
Author
|
Closing — redundant with merging Generated by Claude Code |
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
2 participants
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
Continues #752 (stacked on this PR's base,
feature/house-style-dark-mode-reset). #753's fix (#754, "Give dark example HTML files an explicit dark background") is merged intomainnow, but this house-style branch predated it — so its migratedapplicationcollections, includingbreadcrumbs, were still missing the fix.mainintofeature/house-style-dark-mode-reset(no conflicts) to pick up Bugfix - Give dark example HTML files an explicit dark background #754's explicitdark:bg-*on every-dark.html's<body>.public/component.cssso the compiled stylesheet reflects it.HOUSE_STYLE_PLAN.md.Investigation: "breadcrumbs link text becomes invisible on hover"
Traced this down before assuming it was a cascade bug in the migrated hover classes. It wasn't —
dark:hover:text-gray-50and the light-modehover:text-gray-900have identical CSS specificity, anddark:hover:is generated later in the compiled stylesheet, so it correctly wins the tie (verified against Tailwind Play and by readingcomponent.css's actual rule order).The real cause: without #754's background fix, a standalone
-dark.htmlfile (as opposed to one embedded inComponentPreview.astro's iframe, which supplies its ownbg-gray-900) renders on the browser's default white page background. The basedark:text-gray-200state is merely low-contrast against that — but the hover state (dark:hover:text-gray-50, near-white) is what actually disappears, matching the report exactly. No changes to the hover classes themselves were needed.Also worth noting for anyone testing hover states in this sandbox specifically: its headless Chromium reports
(hover: hover)asfalseand isn't overridable via CDP'sEmulation.setEmulatedMediain this build, and Tailwind v4 wraps thehover:variant in that media query — so hover states never visibly trigger in this sandbox's headless browser at all, bug or not. Verify in a real browser or Tailwind Play instead.Test plan
pnpm lintpnpm astro checkbadges,breadcrumbs,button-groups,checkboxes,details-list,dividers) now have an explicitdark:bg-*on every-dark.html's<body>component.cssrule order givesdark:hover:the correct cascade priority over the light-modehover:classGenerated by Claude Code