Responsiivinen korkeus: terminaali ja UI skaalautuvat viewport-korkeuteen

Terminaali: clamp(200px, 35vh, 500px) — skaalautuu ikkunan mukaan.
<900px korkeus: pienempi otsikko, tiiviimmät avataret, matalampi terminaali.
>1200px korkeus: isompi terminaali ja promptikenttä.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-07 09:22:15 +03:00
parent 8c95282654
commit 8752c0f465

View File

@@ -388,7 +388,7 @@
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
font-size:14px; font-size:14px;
color:var(--success-color); color:var(--success-color);
height:300px; height: clamp(200px, 35vh, 500px);
overflow-y:auto; overflow-y:auto;
text-align:left; text-align:left;
white-space: pre-wrap; white-space: pre-wrap;
@@ -688,6 +688,21 @@
#code-input-container { flex-direction: column !important; } #code-input-container { flex-direction: column !important; }
#code-send-btn { width: 100%; margin-top: 5px; } #code-send-btn { width: 100%; margin-top: 5px; }
} }
/* Responsiivinen korkeus */
@media (max-height: 900px) {
.terminal-panel { height: clamp(150px, 25vh, 250px); }
.agent-prompt-editor textarea { min-height: 30px; }
.container > div:first-child { margin-bottom: 6px; }
.container h1 { font-size: 22px; }
.container .sub { font-size: 12px; }
.avatar-card { padding: 6px 4px; }
.avatar-card img { width: 50px; height: 50px; margin-bottom: 4px; }
}
@media (min-height: 1200px) {
.terminal-panel { height: clamp(350px, 40vh, 600px); }
.agent-prompt-editor textarea { min-height: 80px; }
}
</style> </style>
</head> </head>
<body> <body>