UI: Add fluid resolution-based scaling for WQHD and 4K displays in index.css

frontend/src/index.css

@@ -210,3 +210,25 @@ input:focus, textarea:focus, select:focus {
   box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15) !important;
   outline: none;
 }
+
+/* WQHD & 4K Monitor Responsive Scaling (Fluid Typography & UI Scaling) */
+@media (min-width: 1440px) {
+  html {
+    font-size: 16.5px;
+  }
+}
+@media (min-width: 1920px) {
+  html {
+    font-size: 17.5px;
+  }
+}
+@media (min-width: 2560px) {
+  html {
+    font-size: 19px;
+  }
+}
+@media (min-width: 3440px) {
+  html {
+    font-size: 20px;
+  }
+}

frontend/src/views/AgentView.tsx

@@ -224,7 +224,7 @@ export function AgentView() {
             </div>
 
             {/* The Graph Canvas Area */}
-            <div ref={containerRef} className="relative w-full h-[360px] border border-border/30 rounded-xl bg-black/25 overflow-hidden flex">
+            <div ref={containerRef} className="relative w-full h-96 border border-border/30 rounded-xl bg-black/25 overflow-hidden flex">
               <svg className="absolute inset-0 pointer-events-none w-full h-full">
                 <defs>
                   <linearGradient id="cyan-to-teal" x1="0%" y1="0%" x2="100%" y2="0%">

frontend/src/views/ModelsView.tsx

@@ -488,7 +488,7 @@ function Cockpit() {
         </div>
 
         {/* The Graph Canvas Area */}
-        <div ref={containerRef} className="relative w-full h-[360px] border border-border/30 rounded-xl bg-black/25 overflow-hidden flex">
+        <div ref={containerRef} className="relative w-full h-96 border border-border/30 rounded-xl bg-black/25 overflow-hidden flex">
           {/* SVG Overlay behind HTML Nodes */}
           <svg className="absolute inset-0 pointer-events-none w-full h-full">
             {/* Gradients */}