fix: the chat's message field lower - 42px for a line instead of 52, the clip and send to scale, still centred on the last line

This commit is contained in:
redtea committed 2026-10-17 14:47:42 +03:00
1 parent 983809714b
commit 351e4ad28d
2 files changed
+9 -9

No files matched your search

+2 -2
View File
@@ -885,8 +885,8 @@
// its width and wrap the last word a character too early.
function grow() {
input.style.overflowY = 'hidden';
input.style.height = '40px';
const h = input.scrollHeight + 2;
input.style.height = '32px';
const h = input.scrollHeight;
input.style.height = Math.min(140, h) + 'px';
input.style.overflowY = h > 140 ? 'auto' : 'hidden';
}
+7 -7
View File
@@ -896,25 +896,25 @@ body.touch.term-active .ai-fab { bottom:104px; }
.ai-code pre { margin:0; padding:8px; background:#0c0f13; border:1px solid var(--border); border-radius:7px; overflow:auto; font-size:12.5px; white-space:pre-wrap; }
.ai-code .ai-run { margin-top:6px; }
.ai-form-in { display:flex; padding:8px 10px 10px; }
.ai-inputbox { position:relative; min-width:0; flex:1; padding:5px; background:#0c0f13; border:1px solid var(--border); border-radius:13px; transition:border-color .15s, box-shadow .15s, background-color .15s; }
.ai-inputbox { position:relative; min-width:0; flex:1; padding:4px; background:#0c0f13; border:1px solid var(--border); border-radius:13px; transition:border-color .15s, box-shadow .15s, background-color .15s; }
.ai-inputbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px rgba(91,140,255,.12); }
/* The clip and send keep to the last line of the text, as in Telegram:
at the bottom, centred on that line (2px up from the field's bottom). */
at the bottom, centred on that line (a line's field is their height). */
.ai-entry { display:flex; align-items:flex-end; gap:5px; min-width:0; }
.ai-form-in textarea { flex:1; min-width:0; resize:none; font:inherit; font-size:16px; line-height:24px; padding:8px 6px; height:40px; max-height:140px; overflow-y:auto; color:var(--text); background:transparent; border:0; border-radius:8px; }
.ai-form-in textarea { flex:1; min-width:0; resize:none; font:inherit; font-size:16px; line-height:22px; padding:5px 6px; height:32px; max-height:140px; overflow-y:auto; color:var(--text); background:transparent; border:0; border-radius:8px; }
.ai-form-in textarea:focus { outline:none; border-color:transparent; }
.ai-attach { flex:none; width:36px; height:36px; padding:0; margin-bottom:2px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:transparent; border:0; border-radius:50%; }
.ai-attach { flex:none; width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:transparent; border:0; border-radius:50%; }
.ai-attach:hover { color:var(--text); background:#1b222c; }
/* Send, as in Telegram: no plate, a blue plane that comes in when there is
something to send (and stays as "stop" while the answer runs), and goes
away when the field is empty. A round shade under the pointer, like the
clip's. As far from the right edge as from the top and bottom. */
.ai-send { flex:none; box-sizing:border-box; width:0; height:36px; min-width:0; padding:0; margin:0 0 2px -5px; overflow:hidden;
.ai-send { flex:none; box-sizing:border-box; width:0; height:32px; min-width:0; padding:0; margin:0 0 0 -5px; overflow:hidden;
display:inline-flex; align-items:center; justify-content:center; align-self:flex-end; line-height:1;
color:var(--accent); background:transparent; border:0; border-radius:50%;
opacity:0; transform:scale(.4); pointer-events:none;
transition:width .2s ease, margin .2s ease, opacity .16s ease, transform .24s cubic-bezier(.3,1.45,.55,1), background-color .15s, color .15s; }
.ai-send.show { width:36px; margin:0 3px 2px 0; opacity:1; transform:none; pointer-events:auto; }
.ai-send.show { width:32px; margin:0; opacity:1; transform:none; pointer-events:auto; }
.ai-send:hover { color:#7ab6ff; background:#1b222c; }
.ai-send:active { transform:scale(.9); }
.ai-send:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(79,157,255,.45); }
@@ -1004,7 +1004,7 @@ body:not(.touch) .ai-fab { cursor:grab; touch-action:none; }
body.ai-dragging .ai-fab, body.ai-dragging .ai-box { transition:none; }
/* The field and the send button: one height on every phone, the button
square whatever the text size. */
.ai-form-in textarea { min-height:40px; }
.ai-form-in textarea { min-height:32px; }
.ai-form-in textarea { border-radius:10px; }
/* Настройки: the key with its eye; PostgreSQL's fields only when chosen. */
.ai-form .keybox { display:flex; gap:6px; align-items:center; }