fix(css): mobile responsive layout and dvh viewport fix#5
fix(css): mobile responsive layout and dvh viewport fix#5nesquena merged 1 commit intonesquena:masterfrom
Conversation
deboste
commented
Mar 31, 2026
- Use 100dvh with 100vh fallback to fix composer being cut off on mobile browsers where the address bar affects viewport height
- Add comprehensive @media(max-width:640px) rules: topbar wrapping, compact messages, full-width msg-body, smaller chips and buttons, responsive composer, approval cards, tool cards, settings modal
- Use font-size:16px on textarea to prevent iOS/Android auto-zoom on input focus (browsers zoom when font-size < 16px)
- Add .topbar-left class on title wrapper for responsive stacking
- Use 100dvh with 100vh fallback to fix composer being cut off on mobile browsers where the address bar affects viewport height - Add comprehensive @media(max-width:640px) rules: topbar wrapping, compact messages, full-width msg-body, smaller chips and buttons, responsive composer, approval cards, tool cards, settings modal - Use font-size:16px on textarea to prevent iOS/Android auto-zoom on input focus (browsers zoom when font-size < 16px) - Add .topbar-left class on title wrapper for responsive stacking
nesquena
left a comment
There was a problem hiding this comment.
Review: PR #5 — mobile responsive layout and dvh viewport fix
Summary
Clean, well-structured CSS-only PR that addresses real mobile usability issues.
What's Good
-
100dvhwith100vhfallback — Correct progressive enhancement pattern. Browsers that don't supportdvhuse the first declaration; modern mobile browsers use the dynamic viewport height to account for browser chrome. This fixes the composer being cut off on mobile. -
font-size: 16pxon textarea — Smart fix for a well-known iOS/Android issue where browsers auto-zoom on inputs with font-size < 16px. This prevents the jarring zoom-on-focus behavior. -
Comprehensive mobile rules — Covers topbar wrapping, message compaction, composer responsiveness, approval/tool cards, and settings modal. All reasonable choices.
-
.topbar-leftclass — Properly coordinated between HTML and CSS. Theflex: 1 1 100%forces title to take full width on mobile, pushing chips to next line for a stacked layout. -
Limited
!importantusage — Only on chips/buttons where specificity against inline styles is needed. Acceptable.
Tests
Ran full test suite: 201 passed, 23 failed — all 23 failures are pre-existing. No regressions.
Verdict
This is a low-risk CSS/HTML-only change with no logic modifications. Looks good to merge. Approved.
|
@deboste Thanks! |
Features: - Subagent session tree with expand/collapse in sidebar - Unified tool card rendering with diff/terminal/todo views - requestAnimationFrame throttled token streaming - Clarify dialog with threading.Event pattern - Git modal with branch/status/log - Collapsible date groups in session list - Context usage indicator in composer - VS Code Dark+ theme with Font Awesome icons - Workspace explorer with labels, tags, breadcrumbs - Auto-generated session titles via LLM - Unified session storage via SessionDB - Inline tool cards during streaming - Gateway approval polling support - Telegram session indicator Security (audit fixes): - Restore XSS protection in renderMd() with esc() sanitization and SAFE_TAGS - Restore credentials:include on all fetch/EventSource calls (PR nesquena#3) - Restore mobile responsive CSS (PR nesquena#5) - Fix sendCompress() calling undefined sendMessage() -> send() - Fix db.add_message() -> db.append_message() - Remove hardcoded su -l user, use HERMES_DESKTOP_USER env var - Preserve upstream security controls (path traversal, headers, body limit, loopback guard) - Restore SESSION_DIR/SESSION_INDEX_FILE exports - Remove unused _write_session_index imports
Reviewed: CSS/HTML only, security audited, test suite passes (201/201 relevant tests). Clean mobile responsive fix.
- Title/badge/source: 2025 → 2026, sources updated to Chatbot Arena/BenchLM - Overall: Opus 4.6 (#1, 1504 Arena Elo), Gemini 3.1 Pro (#2), GPT-5.4 (#3), Sonnet 4.6 (#4), DeepSeek V3.2 (#5, replaces DeepSeek R1) - Coding: Opus 4.6 (#1, powers Claude Code/Cursor), GPT-5.4 (#2, SWE-Pro 57.7%), Sonnet 4.6 (#3), Gemini 3.1 Pro (#4), DeepSeek V3.2 (#5) Removed: Sonnet 4.5, Gemini 2.5 Pro, GPT-5.3 Codex - Writing: Opus 4.6 (#1, Mazur 8.53), Gemini 3.1 Pro (#2, Arena CW 1487), Sonnet 4.6 (#3, EQ-Bench CW 1936), GPT-5.4 (#4), Meta Muse Spark (#5) Removed: Llama 4 Maverick (replaced by Meta Muse Spark) - Search: Gemini 3.1 Pro (#1), Grok 4 (#2, live X data), Sonnet 4.6+tool (#3), GPT-5.4 (#4), Gemini 3 Flash Thinking (#5) Added Grok 4 for real-time social/X data - Reasoning: Gemini 3.1 Pro (#1, GPQA 95.45%), GPT-5.4 (#2), Opus 4.6 (#3), Gemini 3 Flash Thinking (#4, best value), DeepSeek V3.2 (#5) Removed: Kimi K2, DeepSeek R1 standalone - Quick picker: all model names updated to 2026 versions - Setup boxes: OpenAI gpt-5-4 names, Google gemini-3-1-pro-preview, self-hosted section updated to DeepSeek V3.2 + Muse Spark
Coding section: - Gemini 3.1 Pro: add Terminal-Bench 78.4% (highest of any frontier model on CLI/DevOps) Score badge updated to show Terminal-Bench rather than SWE-bench Verified - GPT-5.4: note Terminal-Bench 75.1% in description, consolidate pill text - #5 DeepSeek V3.2 → Qwen 3.6-Plus: leads Terminal-Bench at 61.6%, 88.2% GPQA, 1M context, available now on Alibaba Cloud + OpenRouter Writing section (reordered based on EQ-Bench CW scores): - #1 Claude Sonnet 4.6 (1936 EQ-Bench CW — highest, best voice consistency) - #2 Claude Opus 4.6 (Mazur 8.53, IF Arena #1, 1M context for literary depth) - #3 Gemini 3.1 Pro (Arena CW #1 1487, AI-tell avoidance, 2M context) - #4 GPT-5.4 (noted as ~9th on Arena CW, better for structured/commercial writing) - #5 Meta Muse Spark → Kimi K2.5 (/usr/bin/bash.60/.50, ~1700 EQ-Bench CW, live API) Muse Spark removed — no commercial API available yet Reasoning section: - Gemini 3.1 Pro GPQA: 95.45% → 94.1% (more conservative/recent figure, consistent with both agents' data) - Added ARC-AGI-2 77.1% for Gemini 3.1 Pro (#1 on visual reasoning too) - Opus 4.6: added note that Sonnet leads GDPval-AA (1633 Elo #1) for throughput - #5 DeepSeek V3.2 → Qwen 3.6-Plus (88.2% GPQA, 1M context, same model as coding) Quick picker: - Creative writing: Opus → Sonnet 4.6 (EQ-Bench #1, 85% cheaper) - Hard reasoning: 95.45% → 94.1%, add ARC-AGI-2 mention - Budget pick: DeepSeek V3.2 → Gemini 3 Flash Thinking (/usr/bin/bash.50/1M, 89.8% GPQA) Setup boxes: - Self-hosted: Muse Spark → Qwen 3.6-Plus + Gemma 4 26B MoE (Apache 2.0, 82.3% GPQA with 3.8B active params, best edge/self-hosted reasoning) Overall section: unchanged (top 5 still correct per both agents) Search section: unchanged (no new data from either agent)
Reviewed: CSS/HTML only, security audited, test suite passes (201/201 relevant tests). Clean mobile responsive fix.
SHOULD-FIX #1 (renamed-root client cross-alias): drop strict-equality client filter at static/sessions.js:1853. Server-side _profiles_match cross-aliases 'default'-tagged rows to a renamed root 'kinni'; the strict-equality client would reject them, dropping every legacy session for renamed-root users. The server is now solely authoritative for profile scoping. SHOULD-FIX #2 (messaging-source dedupe ordering): _keep_latest_messaging_session_per_source now runs AFTER the profile filter at api/routes.py:2078. Before, it ran on the merged-cross-profile list with profile-blind keys, discarding the older profile's row across profiles before the scope filter — leaving zero rows for any messaging identity the active profile shared with another profile. NIT #3: _projects_migrated flag now set only AFTER successful save_projects. NIT #4: cleaned dead test code in test_is_root_profile_invalidation_drops_stale. NIT #5: _create_profile_fallback's clone_from=='default' literal now routes through _is_root_profile() for parity with the 5 other callsites. +2 regression tests pin the SHOULD-FIX shapes: - test_keep_latest_messaging_runs_after_profile_filter (source-string ordering) - test_static_sessions_js_trusts_server_profile_scoping (no client re-filter) 4173 -> 4175 tests pass. 0 regressions.