diff --git a/internal/server/web/static/ai.js b/internal/server/web/static/ai.js index 0997947..671678d 100644 --- a/internal/server/web/static/ai.js +++ b/internal/server/web/static/ai.js @@ -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'; } diff --git a/internal/server/web/static/app.css b/internal/server/web/static/app.css index f530743..2305b14 100644 --- a/internal/server/web/static/app.css +++ b/internal/server/web/static/app.css @@ -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; }