Fix HUD overflow and canvas rendering on mobile devices

[Copilot]

HUD elements overflow screen bounds on mobile devices and the 3D canvas renders as black/flickering in portrait orientation.

Changes

HUD Layout

• Replaced fixed positioning (left: 20px) with centered flexbox layout using left: 50% + translateX(-50%)
• Added flexWrap: "wrap" and maxWidth: "95%" to prevent overflow
• Reduced component sizes: padding 10px→8px, fonts 24px→18px, labels shortened (ACCURACY→ACC)

Canvas Container

• Changed from fixed height: 600px to height: 100% with flex: 1 and minHeight: 0
• Added explicit width: 100% and height: 100% to Canvas component style
• Enables canvas to fill available viewport on all devices

Mobile Viewport

• Added height: 100dvh (dynamic viewport height) for mobile browsers
• Added position: fixed to html/body/root to prevent mobile browser UI interference
• Added overflow: hidden to prevent scrolling

Responsive Media Queries

@media (max-width: 768px) { /* Mobile: smaller fonts, compact padding */ }
@media (max-width: 768px) and (orientation: portrait) { /* Hide instructions */ }
@media (max-width: 900px) and (orientation: landscape) { /* Optimized spacing */ }
@media (max-height: 600px) { /* Very small screens */ }

Controls

• Changed to icon-only buttons (e.g., "🔄" vs "🔄 Reset") with reduced padding (6px) and smaller slider (60px)
• Added flex wrapping to prevent horizontal overflow

Test Updates

Updated assertions for canvas container height (600px→100%) and button text content (text→emoji).

Original prompt

Many issues in all the Huds. parts below screen not adjusting to size.

And training /combat screen only work on mobile if I twist the phone. Otherwise huds visble but arena only black and flickers.

Custom agent used: game-developer
Expert in Three.js game development with React integration using @react-three/fiber and @react-three/drei

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This pull request addresses mobile device rendering issues by implementing responsive design improvements for HUD elements and fixing canvas rendering problems in portrait orientation. The changes focus on preventing overflow, improving layout flexibility, and ensuring proper viewport utilization across different device sizes.

Changes:

• HUD elements refactored from fixed left positioning to centered flexbox layout with wrapping support to prevent overflow on small screens
• Canvas container changed from fixed 600px height to flexible 100% height with proper flex properties to fill available viewport
• Control buttons simplified to icon-only display with reduced sizing for mobile optimization
• Added comprehensive media queries for mobile, portrait, landscape, and small screen scenarios
• Tests updated to reflect button text changes (text labels → emojis) and canvas height changes (600px → 100%)

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/App.tsx	Refactored HUD layout to use centered flexbox with wrapping; changed canvas container to flexible height; converted buttons to icon-only; added inline responsive styles
src/App.test.tsx	Updated canvas container height assertion from 600px to 100%
src/App.interaction.test.tsx	Updated mute button text content assertions to match new emoji-only format
src/App.component-integration.test.tsx	Updated mute button text content assertions to match new emoji-only format
src/App.css	Removed duplicate styles; added 100dvh for mobile viewport; added position:fixed to prevent mobile browser UI interference; added comprehensive media queries for responsive behavior

Comments suppressed due to low confidence (1)

src/App.css:58

• CSS rules for html, body, and #root are duplicated. Lines 39-48 define these selectors with identical properties to lines 50-58 (with the exception of background-color on line 57). This creates maintenance overhead and potential inconsistencies.

Consolidate these duplicate rules into a single rule set:

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
}

body {
  background-color: #0d1117;
}

/* Ensure fullscreen across different devices */
html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0d1117;
}

[Copilot]

Using window.innerHeight directly in inline styles will not trigger a re-render when the browser window is resized or when mobile devices change orientation. This creates a mismatch between the media query behavior in CSS (line 150-158 of App.css) which handles the same scenario dynamically.

Consider using a React state variable with a resize event listener, or rely solely on the CSS media query @media (max-height: 600px) that already handles this case by setting .instructions { display: none; }. The inline style override is redundant and will cause the component to show incorrect state after window resizes.

Suggested change

	fontSize: "12px",
	display: window.innerHeight < 600 ? "none" : "block"
	fontSize: "12px"