feat: mobile-optimized layout + phone access instructions

CSS:
- Responsive grid: 2-col desktop → 1-col mobile (≤768px)
- Sidebar becomes horizontal scroll strip on mobile
- 100dvh for correct mobile viewport height
- env(safe-area-inset-*) for iPhone notch/home bar
- 16px input font-size prevents iOS auto-zoom
- 44px min touch targets on input + send button
- touch-action: manipulation stops double-tap zoom
- overscroll-behavior: none prevents iOS bounce bleed
- -webkit-overflow-scrolling: touch for smooth scroll

HTML (base.html):
- viewport-fit=cover for full-bleed on notched iPhones
- apple-mobile-web-app-capable + status-bar-style meta
- theme-color meta (#060d14)

README:
- "Access from your phone" section with exact steps:
  --host 0.0.0.0, ipconfig getifaddr en0, same-WiFi note

https://claude.ai/code/session_01M4L3R98N5fgXFZRvV8X9b6
This commit is contained in:
Claude
2026-02-19 19:15:43 +00:00
parent 03f4027f43
commit f9ccfa9177
3 changed files with 129 additions and 7 deletions

View File

@@ -2,7 +2,10 @@
<html lang="en">
<head>
<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" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#060d14" />
<title>{% block title %}Timmy Time — Mission Control{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />