Add responsive UI scaling for server browser
Introduce resolution-aware UI scaling to keep fonts, glyphs, and panel chrome readable and aligned above 1920×1080. Adds a new components/layout.js that sets --co-ui-scale (baseline 1920×1080) on load/resize and exposes CO_Layout.update; index.html now loads it and app.js triggers updates onBrowserShown and on window resize. styles.css converts many fixed px values to calc()/em driven by --co-ui-scale, removes the old pixel-floor media queries and clamp caps, and scales borders, spacing, and font sizes. controller-glyphs.js multiplies glyph dimensions by the UI scale so controller icons grow correctly. Changes address small/drifting server browser content on high-res and ultrawide displays.
This commit is contained in:
@@ -7,6 +7,34 @@ failed experiments, successful tests, and next steps.
|
||||
|
||||
---
|
||||
|
||||
## 2026-06-18 - Server browser UI resolution scaling
|
||||
|
||||
### Summary
|
||||
Fixed multiplayer server browser content staying small and drifting at resolutions above 1920×1080. Added a `--co-ui-scale` factor (baseline 1920×1080, scales up only) applied to fonts, spacing, borders, and controller glyph sizes. Panel alignment now uses pure viewport percentages so it tracks the native main menu at any resolution.
|
||||
|
||||
### Files Changed
|
||||
- `ui/views/CommonwealthOnline/browser/styles.css`
|
||||
- `ui/views/CommonwealthOnline/browser/components/layout.js` (new)
|
||||
- `ui/views/CommonwealthOnline/browser/components/controller-glyphs.js`
|
||||
- `ui/views/CommonwealthOnline/browser/app.js`
|
||||
- `ui/views/CommonwealthOnline/browser/index.html`
|
||||
|
||||
### Details
|
||||
- Previous `clamp()` font caps stopped text growing past ~20px while the panel frame grew with `vw`/`vh`, making 4K and ultrawide layouts hard to read.
|
||||
- `layout.js` sets `--co-ui-scale` on load, resize, and `onBrowserShown` for Ultralight reliability.
|
||||
- Removed 1280px/2560px media-query pixel floors that fought aspect-ratio scaling.
|
||||
|
||||
### Testing
|
||||
- Not run in-game. Redeploy UI (`deploy-ui.bat`), open Main Menu → Multiplayer at 1920×1080 (should match prior look) and at your high-res fullscreen (text and prompts should scale up with the panel).
|
||||
|
||||
### Known Issues
|
||||
- None currently known.
|
||||
|
||||
### Next Steps
|
||||
- In-game verify alignment against the ADD-ONS / LOAD submenu panel at 2560×1440 and 3840×2160.
|
||||
|
||||
---
|
||||
|
||||
## 2026-06-18 - Individual controller icon PNGs from ui/Icons
|
||||
|
||||
### Summary
|
||||
|
||||
Reference in New Issue
Block a user