diff --git a/dsh/templates/chat.html b/dsh/templates/chat.html index ebfc5c6..e2b7501 100644 --- a/dsh/templates/chat.html +++ b/dsh/templates/chat.html @@ -35,13 +35,29 @@ .msg:hover .bubble .copy { display: block; } .modelrow { display: flex; gap: 8px; align-items: center; } .modelrow select { border: 1px solid #ddd; border-radius: 8px; padding: 6px 8px; font-size: 13px; } - .modelrow label { font-size: 12px; color: #777; } + + .modelrow label { font-size: 12px; color: #777; } + + @media (max-width: 720px) { + #menuBtn { display: inline-flex !important; } + #sidebar { + position: fixed; top: 0; left: 0; bottom: 0; width: 230px; z-index: 40; + transform: translateX(-100%); transition: transform .2s ease; + box-shadow: 2px 0 14px rgba(0,0,0,.18); + } + #sidebar.open { transform: translateX(0); } + .chat-col { flex: 1; min-width: 0; } + .composer input, .composer button, .modelrow select { flex: 1 1 100% !important; width: 100% !important; } + #input { font-size: 16px; } /* avoid iOS auto-zoom */ + } + -
+
+ -
{{ DSH_SLOT }} · {{ DSH_USER }} · {{ DSH_MODEL }}
+
{{ DSH_SLOT }} · {{ DSH_MODEL }}
@@ -138,7 +154,7 @@ } async function openSession(id) { - curSid = id; localStorage.setItem('dshSid', id); + closeDrawer(); curSid = id; localStorage.setItem('dshSid', id); try { const d = await (await fetch('/api/sessions/' + id)).json(); renderMessages(d.messages); @@ -168,6 +184,9 @@ }); } + const sidebar = document.getElementById('sidebar'); + document.getElementById('menuBtn').addEventListener('click', () => sidebar.classList.toggle('open')); + function closeDrawer() { if (sidebar.classList.contains('open')) sidebar.classList.remove('open'); } document.getElementById('newBtn').addEventListener('click', newSession); document.getElementById('dlBtn').addEventListener('click', downloadSession); diff --git a/portal/static/app.css b/portal/static/app.css index 9f62637..410266d 100644 --- a/portal/static/app.css +++ b/portal/static/app.css @@ -327,4 +327,16 @@ button.button, input[type="submit"].button { font-family: inherit; } .muted { color: var(--ink-muted); } .faint { color: var(--ink-faint); } .margin-top { margin-top: var(--space-lg); } -.stack > * + * { margin-top: var(--space-lg); } \ No newline at end of file +.stack > * + * { margin-top: var(--space-lg); } +/* ---------- Responsive (mobile) ---------- */ +@media (max-width: 640px) { + .nav-bar { + flex-wrap: wrap; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-md); + } + .nav-right { flex-wrap: wrap; gap: var(--space-xs); } + .nav-user span:last-child { display: none; } /* hide full name, keep avatar */ + .page { padding: var(--space-lg) var(--space-md); } + .greeting { font: var(--type-heading-2); } +}