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.

ui/views/CommonwealthOnline/browser/components/controller-glyphs.js

@@ -78,6 +78,12 @@
     };
   }
 
+  function getUiScale() {
+    var style = getComputedStyle(document.documentElement);
+    var scale = parseFloat(style.getPropertyValue("--co-ui-scale"));
+    return isFinite(scale) && scale > 0 ? scale : 1;
+  }
+
   function tintCacheKey(url, color) {
     return url + "|" + color.r + "," + color.g + "," + color.b;
   }
@@ -206,6 +212,7 @@
       }
 
       var size = GLYPH_SIZES[glyphId] || GLYPH_SIZES.a;
+      var scale = getUiScale();
       var url = glyphUrl(glyphId);
       if (!url) {
         return '<span class="co-prompt-key co-prompt-key--fallback">' + key + "</span>";
@@ -213,7 +220,7 @@
 
       return (
         '<span class="co-prompt-key co-prompt-key--glyph co-prompt-key--' + glyphId + '"' +
-        ' style="width:' + size.w + "px;height:" + size.h + 'px"' +
+        ' style="width:' + (size.w * scale) + "px;height:" + (size.h * scale) + 'px"' +
         ' aria-hidden="true">' +
         '<img class="co-glyph-img" data-glyph-src="' + url + '" src="' + url + '" alt="" draggable="false" />' +
         "</span>"

ui/views/CommonwealthOnline/browser/components/layout.js

@@ -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();
+})();