BUG "All Guesses" — player cards cut off on the right and not responsive

[maxlin1]

Description

On the reveal screen, the "All Guesses" section shows player result cards that are clipped on the right side. The cards have a fixed width of 140px and never grow to fill available space. With few players (2–3), there is unused space on the right while cards appear cut off due to an overflow: hidden on the parent container blocking the horizontal scroll.

Screenshot: cards visibly cut off mid-way on iPhone 17 Pro Max (iOS Safari).

Expected UX: horizontal scroll should work for many players, but for few players the cards should grow to fill the full container width — responsive, not fixed.

---

Root Cause (Code Analysis)

Problem 1 — Cards have fixed width (flex: 0 0 140px)

styles.css line ~7007:

.result-card {
    flex: 0 0 140px;   /* ❌ fixed — never grows, never shrinks */
    min-width: 140px;
}

With 2 players on a 390px-wide screen: 2 × 140px = 280px — 110px of empty space goes unused on the right. Cards don't fill the container.

Problem 2 — overflow: hidden on the parent clips the scroll

styles.css line ~6972:

.reveal-results-cards {
    width: 100%;
    overflow: hidden;   /* ❌ clips anything beyond bounds, kills scroll */
}

The child results-cards-scroll uses overflow-x: auto for horizontal scrolling, but the parent's overflow: hidden clips content before the scroll can take effect.

Problem 3 — Container is display: grid but receives a single child

player.html line 424:

<div id="reveal-results-cards" class="reveal-results-grid section-content-padded">

.reveal-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* expects cards as direct children */
}

But renderPlayerResultCards() wraps all cards in one results-cards-scroll div, so the grid only has one child — repeat(2, 1fr) has no effect.

---

Proposed Fix

The right UX is:

• Horizontal scroll stays — good for 5+ players
• Cards are responsive — grow to fill full width when players fit without scrolling
• No fixed width — use flex: 1 1 140px so cards share available space equally

1. Fix .result-card — allow growing

/* BEFORE */
.result-card {
    flex: 0 0 140px;
    min-width: 140px;
}

/* AFTER */
.result-card {
    flex: 1 1 140px;   /* grows to fill space, shrinks if needed, min 140px */
    min-width: 140px;
    max-width: 220px;  /* cap so cards don't get absurdly wide on large screens */
    box-sizing: border-box;
}

Result:

• 2 players on 390px → each card ~185px, fills full width ✅
• 4 players on 390px → each card ~95px... too small → scroll kicks in ✅
• 6 players → scroll, cards at 140px each ✅

2. Fix .reveal-results-cards — allow scroll to work

/* BEFORE */
.reveal-results-cards {
    overflow: hidden;
}

/* AFTER */
.reveal-results-cards {
    overflow: visible;  /* let the child scroll container do its own overflow */
}

3. Fix .reveal-results-grid — remove conflicting grid layout

The container element in player.html has class="reveal-results-grid" which applies display: grid. This conflicts with the flex-based results-cards-scroll child. Since the scroll wrapper handles layout, the grid is unnecessary here:

/* BEFORE */
.reveal-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    width: 100%;
}

/* AFTER */
.reveal-results-grid {
    width: 100%;
    /* no display: grid — layout handled by results-cards-scroll flex child */
}

Or alternatively, remove the reveal-results-grid class from the player.html element entirely and rely only on results-cards-scroll for layout.

4. Ensure results-cards-scroll wraps correctly

.results-cards-scroll {
    display: flex;
    flex-direction: row;
    gap: var(--space-sm);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--space-xs);
    -webkit-overflow-scrolling: touch;
    /* ADD: prevent cards from wrapping to next line — scroll instead */
    flex-wrap: nowrap;
}

---

Summary of Changes

File	Line	Change
www/css/styles.css	~6972	.reveal-results-cards: overflow: hidden → overflow: visible
www/css/styles.css	~5066	.reveal-results-grid: remove display: grid / grid-template-columns
www/css/styles.css	~6987	.results-cards-scroll: add flex-wrap: nowrap
www/css/styles.css	~7007	.result-card: flex: 0 0 140px → flex: 1 1 140px, add max-width: 220px

No JavaScript changes required.

---

Visual Behaviour After Fix

Players	Screen width	Result
2	390px	2 cards × ~185px, fill full width, no scroll
3	390px	3 cards × ~123px, fill full width, no scroll
4	390px	4 cards × 140px = 560px → scroll activates
6	390px	6 cards × 140px = 840px → scroll activates