Fix ad layout overlap and HUD conflicts

[blontd6]

Resolves #4477

Description:
Adds CSS styling fixes to resolve ad layout and UI overlap issues that disrupt gameplay controls and modal interfaces:

1. Hides In-Game Bottom Rail Ads: Playwire/Ramp bottom rail ads ([id^="pw-oop-bottom_rail"]) are now completely hidden (display: none !important) when the player is in-game (body.in-game). This prevents the bottom rail ad from rendering over the main control panel and blocking spawn phase selection or troop controls.
2. Prevents Click Blocking on Empty Space: Changed the in-game bottom-left ad wrapper (#in-game-promo-container) to pointer-events: none so that clicking on empty/padding space inside the container does not block interactions with the game map. Only the child ad blocks themselves (#in-game-promo-container > div) retain pointer-events: auto.
3. Controls Z-Indexing: Ensures out-of-page/anchor ads remain behind the bottom HUD by setting their z-index to 50 (below the HUD's z-index of 200).
4. Constrains Google AdSense in Modals: Restricts Google AdSense element heights (google-ad, .adsbygoogle) to max-height: 250px inside modals to prevent them from distorting layouts or pushing buttons off-screen.

Please complete the following:
[x] I have added screenshots for all UI updates
[x] I process any text displayed to the user through translateText() and I've added it to the en.json file
[ ] I have added relevant tests to the test directory (N/A for CSS/layout changes)

Please put your Discord username so you can be contacted if a bug or regression is found:
blontd6

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

Added CSS rules in src/client/styles.css to prevent advertisements from overlapping or blocking the game HUD. Bottom rail ads are hidden during gameplay, the in-game promo container becomes click-through except for its inner content, out-of-page ad elements are pushed behind the HUD, and AdSense ads are height-constrained with clipped overflow.

Changes

Ad HUD overlap fixes

Layer / File(s)	Summary
Ad overlay CSS rules src/client/styles.css	Hides bottom rail ads in-game, makes the promo container click-through except its inner div, lowers z-index of pw-*/pw-ad-* ads behind the bottom HUD, and clamps AdSense height/overflow to stop modal distortion.

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

Poem

A rabbit hopped past ads gone wild,
"No more blocking!" it cheerfully smiled.
Bottom rails hushed, promos let clicks pass through,
AdSense boxed neatly, tidy and true. 🐇✨
HUD stands clear, the map's in view!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: CSS fixes for ad layout overlap and HUD conflicts.
Description check	✅ Passed	The description is directly related to the CSS layout fixes and matches the reported UI overlap issues.
Linked Issues check	✅ Passed	The CSS changes address all #4477 requirements: hide bottom rail ads, make the promo container click-through, lower ad z-index, and constrain AdSense in modals.
Out of Scope Changes check	✅ Passed	No obvious out-of-scope changes are present; the PR stays focused on targeted ad-layout CSS fixes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/client/styles.css (1)

669-676: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

LGTM on the in-game scoping.

Correctly gated behind body.in-game, so it won't hide these ad units outside gameplay.

Minor, optional nit: [id*="bottom_rail"] (unanchored substring) already matches anything caught by [id^="pw-oop-bottom_rail"] and [id^="pw-bottom_rail"], making those two redundant. Not worth blocking on, just a cleanup opportunity.

♻️ Optional selector simplification

-body.in-game [id^="pw-oop-bottom_rail"],
-body.in-game [id*="bottom_rail"],
-body.in-game [class*="bottom-rail"],
-body.in-game [id^="pw-bottom_rail"] {
+body.in-game [id*="bottom_rail"],
+body.in-game [class*="bottom-rail"] {
   display: none !important;
   visibility: hidden !important;
   pointer-events: none !important;
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/client/styles.css` around lines 669 - 676, The in-game ad-hiding rule is
correct, but the selector list in the stylesheet is redundant because
`[id*="bottom_rail"]` already covers the `pw-oop-bottom_rail` and
`pw-bottom_rail` cases. Simplify the rule in `src/client/styles.css` by keeping
the `body.in-game` scoping and removing the duplicate anchored ID selectors,
while preserving the existing `display`, `visibility`, and `pointer-events`
overrides.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/client/styles.css`:
- Around line 693-698: The AdSense height clamp in the stylesheet is currently
global and affects every google-ad/.adsbygoogle instance, not just modal
content. Update the CSS in styles.css to scope the max-height/overflow rule to
the confirmed modal wrapper selector used by the modal components (for example
the modal container/content class referenced by the modal markup), and leave
non-modal ad placements untouched. Use the existing google-ad and .adsbygoogle
selectors only under that modal-specific parent so the clamp applies exclusively
inside modals.
- Around line 687-691: Scope the z-index override for the pw-oop-/pw-ad- ad
selectors to gameplay only, matching the sibling hide-rail rule. Update the
styles in src/client/styles.css so the rule for [id^="pw-oop-"],
[class*="pw-oop-"], and [class*="pw-ad-"] is prefixed with body.in-game (or an
equivalent gameplay-only parent). Keep the existing low z-index intent for the
bottom HUD conflict, but avoid affecting homepage/menu consumers such as
HomepagePromos and the global pw-oop-bottom_rail usage.

---

Nitpick comments:
In `@src/client/styles.css`:
- Around line 669-676: The in-game ad-hiding rule is correct, but the selector
list in the stylesheet is redundant because `[id*="bottom_rail"]` already covers
the `pw-oop-bottom_rail` and `pw-bottom_rail` cases. Simplify the rule in
`src/client/styles.css` by keeping the `body.in-game` scoping and removing the
duplicate anchored ID selectors, while preserving the existing `display`,
`visibility`, and `pointer-events` overrides.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0378f648-dc60-436d-a23d-9332d6e76834

📥 Commits

Reviewing files that changed from the base of the PR and between 1d5a6ae and 56d7d26.

📒 Files selected for processing (1)

• src/client/styles.css

[PatrickMurphyDev]

trim.8DEDF514-38FE-43AD-82C1-C619A5EA8DB5.MOV

Is this meant to fix this issue I come across almost every game while playing on iPhone? Video shows how the ui doesn't react to input

I haven't found specific steps to reproduce but when I click on map to open radial menu I am un able to close the radial menu without performing an action. Doesn't happen every time I click on map