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

This commit is contained in:
Hitonabi
2026-06-26 13:44:20 +02:00
parent 77daa38cf0
commit 311f4d7b68
7 changed files with 29 additions and 7 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -7,8 +7,8 @@
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-CNOUjLQN.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-yPX24G-1.css">
<script type="module" crossorigin src="/assets/index-BPaKNJdw.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D8yfJQ7Z.css">
</head>
<body>
<div id="root"></div>
+22
View File
@@ -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;
}
}
+1 -1
View File
@@ -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%">
+1 -1
View File
@@ -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 */}