sam/family_home_lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile responsiveness: console nav wraps/hides name; dsh sidebar drawer + stacked tools + 16px input

Browse Source
This commit is contained in:
Sam Rolfe
2026-08-26 21:18:44 +10:00
parent 728f18b1ec
commit cc35cbb6a3
2 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
dsh/templates/chat.html
View File

@@ -35,13 +35,29 @@
.msg:hover .bubble .copy { display: block; } .msg:hover .bubble .copy { display: block; }
.modelrow { display: flex; gap: 8px; align-items: center; } .modelrow { display: flex; gap: 8px; align-items: center; }
.modelrow select { border: 1px solid #ddd; border-radius: 8px; padding: 6px 8px; font-size: 13px; } .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 */
}
</style> </style>
</head> </head>
<body> <body>
<header class="top"> <header class="top" style="display:flex;align-items:center;gap:8px;padding:10px 14px">
<button id="menuBtn" type="button" aria-label="Conversations" title="Conversations" style="display:none;align-items:center;justify-content:center;background:none;border:1px solid #ddd;border-radius:8px;padding:4px 9px;font-size:17px;cursor:pointer;line-height:1">☰</button>
<div class="logo">DeepSeek Harness</div> <div class="logo">DeepSeek Harness</div>
<div class="who">{{ DSH_SLOT }} · {{ DSH_USER }} · <span class="model">{{ DSH_MODEL }}</span></div> <div class="who" style="margin-left:auto">{{ DSH_SLOT }} · <span class="model">{{ DSH_MODEL }}</span></div>
</header> </header>
<div class="app"> <div class="app">
@@ -138,7 +154,7 @@
} }
async function openSession(id) { async function openSession(id) {
curSid = id; localStorage.setItem('dshSid', id); closeDrawer(); curSid = id; localStorage.setItem('dshSid', id);
try { try {
const d = await (await fetch('/api/sessions/' + id)).json(); const d = await (await fetch('/api/sessions/' + id)).json();
renderMessages(d.messages); 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('newBtn').addEventListener('click', newSession);
document.getElementById('dlBtn').addEventListener('click', downloadSession); document.getElementById('dlBtn').addEventListener('click', downloadSession);

14
portal/static/app.css
View File

@@ -327,4 +327,16 @@ button.button, input[type="submit"].button { font-family: inherit; }
.muted { color: var(--ink-muted); } .muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); } .faint { color: var(--ink-faint); }
.margin-top { margin-top: var(--space-lg); } .margin-top { margin-top: var(--space-lg); }
.stack > * + * { margin-top: var(--space-lg); } .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); }
}