fix(css): mobile responsive layout and dvh viewport fix by deboste · Pull Request #5 · nesquena/hermes-webui

deboste · 2026-03-31T15:06:53Z

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

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

100dvh with 100vh fallback — Correct progressive enhancement pattern. Browsers that don't support dvh use 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: 16px on 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-left class — Properly coordinated between HTML and CSS. The flex: 1 1 100% forces title to take full width on mobile, pushing chips to next line for a stacked layout.
Limited !important usage — 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.

nesquena-hermes · 2026-04-02T05:49:01Z

@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.

…Copilot nesquena#5) manual_repro_wakeup_hang.py sat in the pytest test root with a hardcoded /home/islaliu/.hermes/... venv path in its docstring. pytest never ran it (no test_ functions) but it was confusing. - git mv tests/manual_repro_wakeup_hang.py -> tests/manual/repro_wakeup_hang.py - Strip the operator-specific absolute interpreter path from the docstring; the run instruction is now parametric ("python tests/manual/repro_wakeup_hang.py" from repo root) and fix the sys.path repo-root math for the now-deeper location. - Exclude tests/manual/ from collection via collect_ignore_glob in the existing tests/conftest.py rather than a nested conftest.py: a second conftest module would collide with the suite's top-level 'from conftest import TEST_BASE/TEST_STATE_DIR' imports (no packages / rootdir-relative module names). Verified: pytest --collect-only tests/ collects 6014 tests, 0 collection errors, the manual script no longer surfaces.

…esquena#5 follow-up) Copilot review nesquena#5 'strip local paths' missed one residue: tests/test_wakeup_model_resolve_hang.py:3-4 still embedded the reviewer's machine path /home/islaliu/.hermes/webui/bootstrap-8787.log. Rewrote lines 3-4 to a neutral description ('a live thread-stack capture of a hung wakeup turn') — root-cause explanation itself unchanged. Full re-grep of tests/ + tests/manual/ confirms this was the only remaining residue. 7/7 tests pass.