Fix control panel width for narrow viewports

[Hiphex]

Description:

Fix control panel width for narrow viewports, Bug fix

Bound the control-panel wrapper width so the interactive overlay no longer stretches across the map when the viewport narrows, letting canvas drags reach the camera again.

src/client/index.html:304 — swapped the broad block wrapper for an inline-flex container and capped its width with min(320px, calc(100vw - 48px)), which keeps pointer events confined to the panel itself instead of swallowing the entire bottom band on narrow windows.

Please complete the following:

• I have added screenshots for all UI updates
• 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
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

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

Hiphex

[coderabbitai]

Walkthrough

Replaces the bottom-right control panel wrapper in src/client/index.html with a div using class="inline-flex pointer-events-auto" and inline style width: min(320px, calc(100vw - 48px)) to adjust responsive sizing and layout while preserving pointer-events behavior.

Changes

Cohort / File(s)	Summary
Client layout wrapper src/client/index.html	Replaced wrapper div with inline-flex pointer-events-auto; added inline width style min(320px, calc(100vw - 48px)) to constrain and align the Control Panel region responsively.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• w-320 #1316 — Similar change constraining control panel width (uses md:w-[320px]) in the same bottom-right container.
• * fix timer overflow #1148 — Modifies the same container elements in src/client/index.html to change layout/width behavior of the control panel.
• Fix gutter ads, move in-game add to bottom right corner. #1214 — Directly alters bottom-right layout and stacking of control panel and in-game ad in src/client/index.html.

Suggested labels

Bug Fix, UI/UX

Suggested reviewers

• scottanderson

Poem

A panel snug on edges of screen,
Inline-flex keeps the layout clean.
Three-twenty whispers to the view,
Clicks pass through, the events stay true.
Small tweak, calm UI — nice and keen.

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "Fix control panel width for narrow viewports" directly aligns with the main change in the pull request. The raw summary confirms the core modification is adjusting the wrapper div layout and responsive sizing for the Control Panel region on narrow viewports. The title is concise (7 words, 44 characters), specific, and clearly communicates the primary purpose of the fix without being vague or including unnecessary noise. A teammate reviewing the commit history would immediately understand that this PR addresses a responsive design issue with the control panel on smaller screens.
Description Check	✅ Passed	The pull request description is clearly related to the changeset and provides substantial, meaningful information. It explains the bug being fixed (control panel overlay stretching across the map on narrow viewports), identifies the specific location of the change (src/client/index.html line 304), describes the technical solution (replacing a block wrapper with an inline-flex container and capping width), and articulates the expected outcome (restoring camera drag functionality). The description also confirms that screenshots, translations, tests, and proper testing were completed, making it informative and thorough rather than vague or generic.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

---

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 and usage tips.}

[evanpelle]

since it's not fixed the control panel shrinks and expands as the numbers change.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/client/index.html (1)

310-315: Approved: Pointer-events constraint is correct and well-targeted.

The shift to inline-flex with pointer-events-auto on the control panel, combined with the parent's pointer-events: none, correctly restricts interactivity to just the panel—restoring camera drag behavior on narrow viewports. The width formula min(320px, calc(100vw - 48px)) is sensible for preventing overflow on mobile while capping at 320px on wider screens.

Consider documenting the 48px value as a semantic constant (e.g., a CSS variable or inline comment) to clarify whether it represents horizontal padding, margin, or another layout consideration—this will help future maintainers understand the responsiveness rationale.

To confirm the layout behaves as intended, please verify that the control panel renders and accepts clicks correctly across a few key viewport widths (e.g., 320px mobile, 640px tablet, 1024px desktop).

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e75d41d and 379a0e2.

📒 Files selected for processing (1)

• src/client/index.html (1 hunks)