fix(bracket): hoist cascade banner to top of round, keep details at bottom#289
Merged
Conversation
…t on bet CTA
Two visual bugs Tim flagged on 2026-06-05:
* The selected/unselected contrast on the Top 8 3rd-placed teams tiles
was too subtle. The 3px inset gold ring + rgba(.., 0.6) border read
as a faint outline next to the unpicked tiles, not as an unambiguous
"this one is picked" affordance. Bumped to a 5px solid-gold inset
with a 1px soft inner highlight + larger outer glow (24px / 0.55
alpha vs 14px / 0.35). The picked tile now visibly lifts.
* /the-bet bottom CTA ("Pick your bracket to enter →") was rendering
gold text on a gold pill. The pill's class .vt-bet-cta-primary set
color: #15151a but .vt-bet-body a (same file, body-paragraph link
styling) is (0,1,1) specificity vs (0,1,0) and was winning the
cascade. Added !important to the CTA's color rule, matching the
pattern .vt-bet-cta-ghost already uses for the same reason.
Refs: sessions/2026-06-05_orchestrator_bracket-save-on-exit.md
Signed-off-by: Tim Thomas <0800tim@gmail.com>
…ottom Tim 2026-06-05 (after the cascade-warnings English-ification ship): > You see the friendly note on desktop now, but it's not visible on > mobile. [...] move the first one to the top and leave the second > one at the bottom. The previous patch landed both the contextual banner and the details collapsible at the bottom of the whole tabpanel grid, so on mobile the banner sat below the matches and the Next-stage CTA, and users hit the empty R32 slots without seeing the explanation. Split the surface so the banner (the actionable bit) hoists to the top of each round and the final-panel section, while the details list (the curious-user reference) stays at the bottom. * CascadeWarnings: new `mode` prop, default `"full"` for back-compat. `"banner"` renders just the upstream-fix CTA; `"details"` renders just the collapsible. In "banner" mode the component returns null when no upstream stage is incomplete, so groups + thirds tabs don't paint an empty wrapper. * BracketBuilder: render `mode="banner"` inside the KO round section (just below the round help text) and inside the final-panel section (just above the final-match card). The existing bottom call is changed to `mode="details"`. Same component, two render slots. CSS untouched. Refs: sessions/2026-06-05_orchestrator_bracket-save-on-exit.md Signed-off-by: Tim Thomas <0800tim@gmail.com>
Auto-triage: GREEN — auto-triage clearRisk score: 0/100
No flags raised by the automated scanners. A human reviewer will still take a look. Labels applied: Posted by |
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.
Tim 2026-06-05 follow-up to the cascade-warnings English-ification: the friendly note wasn't visible on mobile because both the banner and the details list sat below all the empty slots. Split the surface so the actionable banner hoists to the top of each round (and the final-panel section), while the details collapsible stays at the bottom.
CascadeWarningsgets amodeprop (full|banner|details, defaultfullfor back-compat).BracketBuilderrendersmode=\"banner\"at the top of the KO + final sections, andmode=\"details\"at the bottom of the panel grid. CSS untouched.Mobile users now see the "Go to Top 8 3rds →" banner immediately on the empty R32 panel.