Make in-game leaderboard and menu bar flush with screen corners

[evanpelle]

Summary

• Remove the min-[1200px]:top-4/left-4/right-4 offsets that floated the in-game top-left leaderboard and top-right menu bar 1rem off the screen corners on wide screens; both are now top-0 + left-0/right-0 at all widths.
• Drop the matching min-[1200px]:rounded-lg overrides so the corners touching the screen edge stay square, keeping the flush styling (rounded-br-lg/rounded-bl-lg) that narrow screens already used.

Test plan

• Drove a headless singleplayer game at a 1600×900 viewport: measured bounding rects show the leaderboard at top 0/left 0 and the menu bar's right edge exactly at the viewport width (top 0); screenshot confirms both pinned to their corners.
• npx prettier --check clean on the touched files.

🤖 Generated with Claude Code

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 60768247-1854-4547-a6f0-91a20b363174

📥 Commits

Reviewing files that changed from the base of the PR and between 2b63337 and 07fe48f.

📒 Files selected for processing (3)

• src/client/components/DoomsdayClockPanel.ts
• src/client/components/OvertimePanel.ts
• src/client/hud/layers/ReplayPanel.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 5 remain after this review.

---

Walkthrough

The change keeps both sidebars flush with the viewport edges at all widths. It also applies consistent corner rounding without large-screen overrides.

Changes

Sidebar alignment

Layer / File(s)	Summary
Responsive sidebar styling index.html, src/client/hud/layers/GameLeftSidebar.ts, src/client/hud/layers/GameRightSidebar.ts, src/client/components/DoomsdayClockPanel.ts, src/client/components/OvertimePanel.ts, src/client/hud/layers/ReplayPanel.ts	The right sidebar is pinned to the top-right corner. The left sidebar is pinned to the top-left corner. Large-screen offsets and rounded-corner overrides were removed from the sidebars and panels.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Suggested reviewers: celant

Merge Risk: ⚪ Minimal · up to 07fe4

The responsive sidebar styling change was verified at the tested viewport and introduces no identified merge-blocking risk.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary change: the in-game leaderboard and menu bar now sit flush with the screen corners.
Description check	✅ Passed	The description directly explains the removed offsets, corner styling changes, and verification performed for the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 5…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Sidebars meet the edges with care
Corners keep their shape everywhere
Wide screens add no extra space
Panels hold their steady place
Clean classes guide the view}

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🤖 Claude Code Review

Verdict: Approve with minor follow-ups — 0 blocking issues, 2 low-severity issues.

Findings by severity: 0 critical, 0 high, 2 low.

src/client/components/OvertimePanel.ts

• Line 73 (low): This panel is rendered as an unpositioned flow sibling directly below GameRightSidebar's <aside> inside the same right-0-flush wrapper (see index.html and GameRightSidebar.ts, whose createRenderRoot() uses light DOM). It still carries min-[1200px]:rounded-lg, which was only visually coherent while the wrapper had a min-[1200px]:right-4 inset. Now that the wrapper sits flush at right-0 at all widths, this class produces the same "rounded corner against the screen edge" artifact this PR set out to remove from the menu bar directly above it.
  • Suggested fix: drop min-[1200px]:rounded-lg, keeping rounded-bl-lg, consistent with how GameRightSidebar.ts's <aside> was updated in this PR.

src/client/components/DoomsdayClockPanel.ts

• Line 186 (low): Same issue as OvertimePanel.ts:73 — identical class string "... min-[1200px]:rounded-lg rounded-bl-lg ...", same stale leftover from the wrapper's inset removal.
  • Suggested fix: drop min-[1200px]:rounded-lg, keeping rounded-bl-lg.

src/client/hud/layers/ReplayPanel.ts

• Line 73 (low): ReplayPanel has no independent positioning (no fixed/absolute, no own top/right offsets) — it's a flex child of the same wrapper in index.html whose min-[1200px]:top-4 min-[1200px]:right-4 this PR removes. It still has min-[1200px]:rounded-lg, so at ≥1200px it will now render fully rounded corners flush against the screen edge, the same artifact being fixed elsewhere in this PR.
  • Suggested fix: drop min-[1200px]:rounded-lg, keeping rounded-l-lg.

---

Reviewed index.html, src/client/hud/layers/GameLeftSidebar.ts, and src/client/hud/layers/GameRightSidebar.ts for CLAUDE.md compliance and bugs — no violations or bugs found in the changed files themselves. The three issues above are in sibling files not touched by this PR, but they interact directly with the wrapper/aside elements this PR repositions, and were likely missed because they weren't part of the diff.

🤖 Generated with Claude Code

[evanpelle]

Review round 1: all 3 findings fixed in 07fe48f — dropped the stale min-[1200px]:rounded-lg on OvertimePanel, DoomsdayClockPanel and ReplayPanel, which share the now-flush right-0 wrapper and would have rendered rounded corners against the screen edge. No findings declined.

[github-actions]

🤖 Claude Code Review

Verdict: Approve — no issues found.

Findings by severity: 0 critical, 0 high, 0 medium, 0 low.

No issues found. Checked for bugs and CLAUDE.md compliance across all changed files (index.html, src/client/components/DoomsdayClockPanel.ts, src/client/components/OvertimePanel.ts, src/client/hud/layers/GameLeftSidebar.ts, src/client/hud/layers/GameRightSidebar.ts, src/client/hud/layers/ReplayPanel.ts).

This diff is a self-consistent set of Tailwind class-string edits removing min-[1200px]:top-4/left-4/right-4 positional offsets and the matching min-[1200px]:rounded-lg overrides, so the leaderboard and menu bar (plus the sibling panels sharing their flush wrapper) sit square against the viewport edges at all widths. No user-visible text, schemas, or src/core simulation logic are touched, so the i18n and core-determinism/testing rules in CLAUDE.md don't apply here. No syntax issues, broken references, or logic errors were found in the changed lines.

🤖 Generated with Claude Code