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:
@@ -0,0 +1,20 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var REF_W = 1920;
|
||||
var REF_H = 1080;
|
||||
|
||||
function updateUiScale() {
|
||||
var w = window.innerWidth || REF_W;
|
||||
var h = window.innerHeight || REF_H;
|
||||
var scale = Math.max(1, Math.min(w / REF_W, h / REF_H));
|
||||
document.documentElement.style.setProperty("--co-ui-scale", String(scale));
|
||||
}
|
||||
|
||||
window.CO_Layout = {
|
||||
update: updateUiScale
|
||||
};
|
||||
|
||||
window.addEventListener("resize", updateUiScale);
|
||||
updateUiScale();
|
||||
})();
|
||||
Reference in New Issue
Block a user