fix: iPhone keyboard handling — resizes-content viewport, in-flow pill composer on 100dvh, 16px input to stop auto-zoom

This commit is contained in:
Daniel 2026-09-08 23:30:35 +02:00
parent 01f97f7996
commit 68385c42f1
2 changed files with 5 additions and 4 deletions

View file

@ -180,8 +180,8 @@
#assistant-saved-chats { flex-direction:column; padding:0 6px 12px; gap:6px; overflow:visible; } #assistant-saved-chats { flex-direction:column; padding:0 6px 12px; gap:6px; overflow:visible; }
.assistant-saved-chat { max-width:none; } .assistant-saved-chat { max-width:none; }
.assistant-main { min-height:0; } .assistant-main { min-height:0; }
#assistant-chat-view { display:flex; flex-direction:column; min-height:100dvh; } #assistant-chat-view { display:flex; flex-direction:column; height:100dvh; }
.assistant-messages { flex:1 1 auto; max-height:none; padding:8px 14px 120px; } .assistant-messages { flex:1 1 auto; max-height:none; padding:8px 14px 12px; }
.assistant-empty { margin:28px auto; max-width:100%; } .assistant-empty { margin:28px auto; max-width:100%; }
.assistant-empty i { font-size:26px; } .assistant-empty i { font-size:26px; }
.assistant-empty h3 { font-size:16px; text-align:left; } .assistant-empty h3 { font-size:16px; text-align:left; }
@ -193,7 +193,8 @@
.assistant-toolbar-actions { display:none; } .assistant-toolbar-actions { display:none; }
.assistant-layout.mobile-chats-open .assistant-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .assistant-layout.mobile-chats-open .assistant-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
/* Floating pill composer */ /* Floating pill composer */
.assistant-composer { position:fixed; left:12px; right:12px; bottom:12px; z-index:60; background:white; border:1px solid var(--g200); border-radius:28px; box-shadow:0 8px 30px rgba(0,0,0,.14); padding:6px 6px 6px 16px; } .assistant-composer { position:static; flex:0 0 auto; margin:0 10px 10px; z-index:60; background:white; border:1px solid var(--g200); border-radius:28px; box-shadow:0 8px 30px rgba(0,0,0,.14); padding:6px 6px 6px 16px; }
#assistant-input { font-size:16px; }
.assistant-composer > label { display:none; } .assistant-composer > label { display:none; }
#assistant-context-budget, #assistant-context-warning { display:none; } #assistant-context-budget, #assistant-context-warning { display:none; }
.assistant-composer-footer { flex-direction:row; align-items:center; gap:4px; margin-top:2px; } .assistant-composer-footer { flex-direction:row; align-items:center; gap:4px; margin-top:2px; }

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
<title>Pediatric Clinical Tools</title> <title>Pediatric Clinical Tools</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">