ScuttleBot
fix: iOS Safari chat cutoff — use 100dvh and safe-area-inset-bottom
Commit
fde91c6921216118a26e24e510ac46b3159720afabf5193e77343808c5e04959
Parent
d924aea3e69d212…
1 file changed
+3
-3
+3
-3
| --- internal/api/ui/index.html | ||
| +++ internal/api/ui/index.html | ||
| @@ -1,14 +1,14 @@ | ||
| 1 | 1 | <!DOCTYPE html> |
| 2 | 2 | <html lang="en"> |
| 3 | 3 | <head> |
| 4 | 4 | <meta charset="UTF-8"> |
| 5 | -<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| 6 | 6 | <title>scuttlebot</title> |
| 7 | 7 | <style> |
| 8 | 8 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| 9 | -body { font-family: ui-monospace,'Cascadia Code','Source Code Pro',monospace; background:#0d1117; color:#e6edf3; height:100vh; display:flex; flex-direction:column; overflow:hidden; } | |
| 9 | +body { font-family: ui-monospace,'Cascadia Code','Source Code Pro',monospace; background:#0d1117; color:#e6edf3; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; } | |
| 10 | 10 | |
| 11 | 11 | /* header */ |
| 12 | 12 | header { background:#161b22; border-bottom:1px solid #30363d; padding:0 20px; display:flex; align-items:stretch; flex-shrink:0; height:48px; } |
| 13 | 13 | .brand { display:flex; align-items:center; gap:8px; padding-right:20px; border-right:1px solid #30363d; margin-right:4px; } |
| 14 | 14 | .brand h1 { font-size:14px; color:#58a6ff; letter-spacing:.05em; } |
| @@ -170,11 +170,11 @@ | ||
| 170 | 170 | .login-brand h1 { font-size:22px; color:#58a6ff; letter-spacing:.05em; } |
| 171 | 171 | .login-brand p { color:#8b949e; font-size:13px; margin-top:6px; } |
| 172 | 172 | /* unread badge on chat tab */ |
| 173 | 173 | .nav-tab[data-unread]::after { content:attr(data-unread); background:#f85149; color:#fff; border-radius:999px; padding:1px 5px; font-size:10px; margin-left:5px; vertical-align:middle; } |
| 174 | 174 | .msg-text { color:#e6edf3; word-break:break-word; } |
| 175 | -.chat-input { padding:9px 13px; border-top:1px solid #30363d; display:flex; gap:7px; flex-shrink:0; background:#161b22; } | |
| 175 | +.chat-input { padding:9px 13px; padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px)); border-top:1px solid #30363d; display:flex; gap:7px; flex-shrink:0; background:#161b22; } | |
| 176 | 176 | |
| 177 | 177 | /* channels tab */ |
| 178 | 178 | .chan-card { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #21262d; } |
| 179 | 179 | .chan-card:last-child { border-bottom:none; } |
| 180 | 180 | .chan-card:hover { background:#1c2128; } |
| 181 | 181 |
| --- internal/api/ui/index.html | |
| +++ internal/api/ui/index.html | |
| @@ -1,14 +1,14 @@ | |
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>scuttlebot</title> |
| 7 | <style> |
| 8 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| 9 | body { font-family: ui-monospace,'Cascadia Code','Source Code Pro',monospace; background:#0d1117; color:#e6edf3; height:100vh; display:flex; flex-direction:column; overflow:hidden; } |
| 10 | |
| 11 | /* header */ |
| 12 | header { background:#161b22; border-bottom:1px solid #30363d; padding:0 20px; display:flex; align-items:stretch; flex-shrink:0; height:48px; } |
| 13 | .brand { display:flex; align-items:center; gap:8px; padding-right:20px; border-right:1px solid #30363d; margin-right:4px; } |
| 14 | .brand h1 { font-size:14px; color:#58a6ff; letter-spacing:.05em; } |
| @@ -170,11 +170,11 @@ | |
| 170 | .login-brand h1 { font-size:22px; color:#58a6ff; letter-spacing:.05em; } |
| 171 | .login-brand p { color:#8b949e; font-size:13px; margin-top:6px; } |
| 172 | /* unread badge on chat tab */ |
| 173 | .nav-tab[data-unread]::after { content:attr(data-unread); background:#f85149; color:#fff; border-radius:999px; padding:1px 5px; font-size:10px; margin-left:5px; vertical-align:middle; } |
| 174 | .msg-text { color:#e6edf3; word-break:break-word; } |
| 175 | .chat-input { padding:9px 13px; border-top:1px solid #30363d; display:flex; gap:7px; flex-shrink:0; background:#161b22; } |
| 176 | |
| 177 | /* channels tab */ |
| 178 | .chan-card { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #21262d; } |
| 179 | .chan-card:last-child { border-bottom:none; } |
| 180 | .chan-card:hover { background:#1c2128; } |
| 181 |
| --- internal/api/ui/index.html | |
| +++ internal/api/ui/index.html | |
| @@ -1,14 +1,14 @@ | |
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> |
| 6 | <title>scuttlebot</title> |
| 7 | <style> |
| 8 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| 9 | body { font-family: ui-monospace,'Cascadia Code','Source Code Pro',monospace; background:#0d1117; color:#e6edf3; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; } |
| 10 | |
| 11 | /* header */ |
| 12 | header { background:#161b22; border-bottom:1px solid #30363d; padding:0 20px; display:flex; align-items:stretch; flex-shrink:0; height:48px; } |
| 13 | .brand { display:flex; align-items:center; gap:8px; padding-right:20px; border-right:1px solid #30363d; margin-right:4px; } |
| 14 | .brand h1 { font-size:14px; color:#58a6ff; letter-spacing:.05em; } |
| @@ -170,11 +170,11 @@ | |
| 170 | .login-brand h1 { font-size:22px; color:#58a6ff; letter-spacing:.05em; } |
| 171 | .login-brand p { color:#8b949e; font-size:13px; margin-top:6px; } |
| 172 | /* unread badge on chat tab */ |
| 173 | .nav-tab[data-unread]::after { content:attr(data-unread); background:#f85149; color:#fff; border-radius:999px; padding:1px 5px; font-size:10px; margin-left:5px; vertical-align:middle; } |
| 174 | .msg-text { color:#e6edf3; word-break:break-word; } |
| 175 | .chat-input { padding:9px 13px; padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px)); border-top:1px solid #30363d; display:flex; gap:7px; flex-shrink:0; background:#161b22; } |
| 176 | |
| 177 | /* channels tab */ |
| 178 | .chan-card { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #21262d; } |
| 179 | .chan-card:last-child { border-bottom:none; } |
| 180 | .chan-card:hover { background:#1c2128; } |
| 181 |