Skip to content

fix(css): mobile responsive layout and dvh viewport fix#5

Merged
nesquena merged 1 commit intonesquena:masterfrom
deboste:fix/mobile-responsive
Apr 2, 2026
Merged

fix(css): mobile responsive layout and dvh viewport fix#5
nesquena merged 1 commit intonesquena:masterfrom
deboste:fix/mobile-responsive

Conversation

@deboste
Copy link
Copy Markdown
Contributor

@deboste 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
Copy link
Copy Markdown
Owner

@nesquena nesquena left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

  3. Comprehensive mobile rules — Covers topbar wrapping, message compaction, composer responsiveness, approval/tool cards, and settings modal. All reasonable choices.

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

  5. 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 nesquena merged commit 0a39a64 into nesquena:master Apr 2, 2026
@nesquena-hermes
Copy link
Copy Markdown
Collaborator

@deboste Thanks!

MartinNielsenDev added a commit to MartinNielsenDev/hermes-webui that referenced this pull request Apr 4, 2026
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
Ola-Turmo pushed a commit to Ola-Turmo/hermes-webui that referenced this pull request Apr 9, 2026
Reviewed: CSS/HTML only, security audited, test suite passes (201/201 relevant tests). Clean mobile responsive fix.
nesquena-hermes pushed a commit that referenced this pull request Apr 12, 2026
- 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
nesquena-hermes pushed a commit that referenced this pull request Apr 12, 2026
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)
JKJameson pushed a commit to JKJameson/hermes-webui that referenced this pull request Apr 25, 2026
Reviewed: CSS/HTML only, security audited, test suite passes (201/201 relevant tests). Clean mobile responsive fix.
nesquena-hermes added a commit that referenced this pull request May 4, 2026
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants