style(bracket): group-stage chips look like Top 8 Thirds tiles#283
Merged
Conversation
The collapsed group-card header had four small pill chips along
the bottom (flag + 3-letter code). Tim asked for a heavier
treatment in the same family as the Top 8 Thirds picker tiles:
larger, blurred full-bleed flag background, dark scrim, crisp
foreground flag + bold team code.
Mobile keeps the existing 4-on-one-row constraint (the chips share
flex 1 1 0) so they slot in at ~44px tall. Desktop grows to ~56px
with a bigger flag chip + 17px code, matching the Thirds tile feel
without quite the same heft.
Mechanics:
GroupCard.tsx
Inline a --km-team-bg custom property on each .bracket-group-
head-team so the new ::before pseudo can resolve the flag SVG
without per-team CSS. Same pattern .bracket-thirds-tile uses.
bracket.css
.bracket-group-head-team: dropped the pill / transparent
background; now a position:relative tile with border-radius
10px, scrim ::after, blurred-flag ::before, isolation:isolate
so the z-index doesn't bleed.
[data-advance='1']: gold inset ring + outer halo, matching
.bracket-thirds-tile.is-selected. Lighter scrim so the gold
reads against the flag.
[data-advance='2']: silver ring, same idea.
Old per-flag box-shadow rings dropped, the tile body now carries
the advance border + halo.
@media (min-width: 900px): bumped padding, min-height and font
so the tile reads at desktop scale.
Tim 2026-06-05. Deploy gated on his dev verification.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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.
Restyles the four team chips at the bottom of each collapsed group card to mirror the Top 8 Thirds picker: blurred full-bleed flag background, dark scrim, crisp foreground flag chip + bold code. Mobile keeps 4-on-one-row at ~44px tall; desktop scales up to ~56px with a larger flag and 17px code.
Same blurred-flag trick
.bracket-thirds-tile::beforeuses, with the URL wired through an inline--km-team-bgcustom property on the chip.Advance rings (1st gold, 2nd silver) now sit on the tile body via inset + outer box-shadow, matching the
.bracket-thirds-tile.is-selectedtreatment.Will deploy once Tim verifies on dev.
🤖 Generated with Claude Code