Skip to content

app: screen 0 shows 3 of 7 standings rows at 1280x720 #370

Description

@FlyM1ss

#367 stops screen 0's board panel from overflowing the hero (it was being cut by overflow: hidden, silently). Bounding it to the hero means the panel now has a real height budget, and at common laptop heights that budget does not fit seven standings rows plus the chart.

Measured on the shipped build, probe aimed at .home-landing-hero:

viewport panel chart rows visible hero clip
1920×1080 866 280 7/7 0px
1600×900 697 224 6/7 0px
1440×900 697 212 6/7 0px
1280×800 603 156 5/7 0px
1440×768 573 139 4/7 0px
1366×768 573 139 4/7 0px
1201×760 565 132 4/7 0px
1280×720 528 132 3/7 0px
1240×700 509 132 3/7 0px

The rest are reachable by scrolling — .home-module-rank-list is overflow-y: auto, and #367 makes the chart flex: 0 1 auto with a 132px floor precisely so the illustration yields before the standings do.

The arithmetic

At 1280×720 the panel gets 528px against 642px of content: 253 fixed chrome + 187 chart at full clamp + 202 rows (7 × 22px + 6 × 8px gap). Nothing fits all three in 528px. The pre-#367 layout only appeared to because the surplus was being clipped out of view.

Where the room is, if seven rows are worth protecting

The 253px of fixed chrome is the only real lever:

child px
.home-module-head 44
.hm-rank-meta 49 (24 at 1920; wraps to two lines below)
.hm-rank-table-head 26
.hm-rank-season 62
.hm-footer-btn 36
panel padding 36

.hm-rank-season (the Season-0 preview note) and .hm-footer-btn ("See both leaderboards") are 98px together — more than a third of the chrome. Dropping the season note alone buys ~3 rows at 1280×720. But that note is the banner anchored on seasonHasAdvanced(), which exists so the preview cannot silently claim a season ran, so it is not mine to cut in a layout PR.

Options, roughly in order of appetite:

  1. Accept as-is. The list scrolls, the top ranks are always visible, and the leaderboard's own page is one click away. Costs nothing.
  2. Collapse the season note to one line at heights below ~800px. Buys ~2 rows without dropping the claim.
  3. Show top 5 explicitly with a "+2 more" affordance, instead of 7 rows that sometimes scroll. Makes the truncation deliberate rather than incidental.
  4. Tighten row pitch below some height (22px + 8px gap is generous). Buys ~1–2 rows, costs density.

No action needed for correctness — the clipping bug this came from is fixed and verified at 0px across 13 viewports. Filing so the trade-off is visible rather than buried in a merged PR's diff.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions