fix(mobile): input bar non visibile - usare 100dvh

- #app usa 100dvh su mobile (viewport dinamico)
- Input piu visibile anche se disabilitato (opacity 0.7)
- Touch target 44px per input e bottone
- flex-shrink:0 su btn-send
- safe-area padding aumentato
This commit is contained in:
truetype committed 2026-06-29 18:47:37 +02:00
1 parent 54c9acb0d6
commit 8b6620cd3d
2 files changed
+57 -1

No files matched your search

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

+57 -1
View File
@@ -475,7 +475,7 @@ html, body {
}
#input-area input::placeholder { color: var(--text-muted); }
#input-area input:disabled {
opacity: 0.4;
opacity: 0.7;
cursor: not-allowed;
}
#btn-send {
@@ -663,6 +663,62 @@ html, body {
#sidebar.open { left: 0; }
#sidebar-backdrop.open { display: block; }
#app { flex-direction: column; height: 100dvh; }
#header {
padding: 0 12px;
gap: 10px;
min-height: 48px;
height: 48px;
}
#header h1 { font-size: 14px; letter-spacing: 1px; }
#header .turn-badge { font-size: 11px; }
#main {
width: 100%;
min-height: 0;
}
#chat {
padding: 12px;
gap: 10px;
font-size: 15px;
}
#input-area {
padding: 10px 12px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
gap: 8px;
}
#input-area input {
font-size: 16px;
padding: 12px;
min-height: 44px;
}
#btn-send {
width: 44px;
height: 44px;
font-size: 20px;
flex-shrink: 0;
}
/* Welcome screen */
#welcome h1 { font-size: 28px; }
#welcome .subtitle { font-size: 14px; }
.camp-list { max-width: 100%; padding: 0 12px; }
#new-camp-form { width: 100%; max-width: 100%; padding: 0 12px; }
/* Sidebar content */
.sidebar-section { padding: 10px 12px; }
.sidebar-section h2 { font-size: 10px; }
.char-name { font-size: 14px; }
.stat-grid { gap: 3px; }
.stat-row { font-size: 12px; }
.area-item { font-size: 12px; }
}
#sidebar.open { left: 0; }
#sidebar-backdrop.open { display: block; }
#app { flex-direction: column; }
#header {