fix(web): allow mobile dashboard scrolling (#28051) by wesleysimplicio · Pull Request #28577 · NousResearch/hermes-agent

wesleysimplicio · 2026-05-19T07:01:40Z

What does this PR do?

Fixes mobile dashboard usability by allowing the document root to scroll on small screens.

Root cause

The detailed rationale from the original PR body is preserved below. This template update keeps the review structure consistent with #29640.

Fix

Add one mobile-only media query in web/src/index.css.
Apply the same root overflow rule to html, body, and #root together.
Preserve horizontal overflow clipping to avoid sideways drift.
Avoid unrelated layout, component, or routing changes.

Why this shape

This shape mirrors #29640 so reviewers can quickly compare scope, root cause, fix, tests, and related context without having to decode a custom PR description.

Tests

The original PR body below contains the previous validation notes, commands, or test plan.
No code changes are introduced by this formatting update itself.

Related PRs / issues

Fixes #28051

Original body

## What does this PR do?

Fixes mobile dashboard usability by allowing the document root to scroll on small screens.

The dashboard shell currently locks html, body, and #root to a fixed viewport and hides overflow. That works on desktop, but on mobile-sized screens it can trap dashboard content below the fold. This PR keeps the desktop lock intact and only relaxes the root scroll behavior inside the mobile breakpoint.

Solution Sketch

Add one mobile-only media query in web/src/index.css.
Apply the same root overflow rule to html, body, and #root together.
Preserve horizontal overflow clipping to avoid sideways drift.
Avoid unrelated layout, component, or routing changes.

Related Issue

Fixes #28051

Type of Change

🐛 Bug fix (non-breaking change that fixes an issue)
✨ New feature (non-breaking change that adds functionality)
🔒 Security fix
📝 Documentation update
✅ Tests (adding or improving test coverage)
♻️ Refactor (no behavior change)
🎯 New skill (bundled or hub)

Changes Made

Added a max-width: 768px rule for the dashboard root containers.
Changed mobile root sizing to height: auto, min-height: 100dvh, and max-height: none.
Enabled overflow-y: auto on mobile root containers.
Kept overflow-x: hidden for the same containers.

How to Test

Run npm --prefix web run build.
Start the web UI with npm --prefix web run dev -- --host 127.0.0.1 --port 5177.
Open http://127.0.0.1:5177 in a mobile viewport such as 390x844.
Confirm the dashboard can scroll vertically and does not introduce horizontal drift.
Confirm desktop viewport behavior remains unchanged.

Checklist

Code

I've read the Contributing Guide
My commit messages follow Conventional Commits (fix(scope):, feat(scope):, etc.)
I searched for existing PRs to make sure this isn't a duplicate
My PR contains only changes related to this fix/feature (no unrelated commits)
I've run pytest tests/ -q and all tests pass
I've added tests for my changes (required for bug fixes, strongly encouraged for features)
I've tested on my platform: Windows 11, web dashboard mobile viewport smoke

Documentation & Housekeeping

I've updated relevant documentation (README, docs/, docstrings) — or N/A
I've updated cli-config.yaml.example if I added/changed config keys — or N/A
I've updated CONTRIBUTING.md or AGENTS.md if I changed architecture or workflows — or N/A
I've considered cross-platform impact (Windows, macOS) per the compatibility guide — or N/A
I've updated tool descriptions/schemas if I changed tool behavior — or N/A

Screenshots / Logs

Build: npm --prefix web run build passed.
Whitespace: git diff --check HEAD -- web/src/index.css passed.
Mobile viewport smoke: npx playwright screenshot --viewport-size=390,844 http://127.0.0.1:5177 evidence/pr-28577-mobile-390x844.png passed.
Note: the generated screenshot is intentionally kept out of the source diff.

Generated by Hermes Turbo

austinpickett

Please use PULL_REQUEST_TEMPLATE.md, also attach screens maybe even a quick video.

Copilot

Pull request overview

Relaxes the root viewport lock on small screens so the dashboard becomes scrollable on mobile while keeping desktop behavior unchanged.

Changes:

Adds a max-width: 768px media query in web/src/index.css.
Overrides html, body, and #root to use height: auto, min-height: 100dvh, and overflow-y: auto.
Keeps overflow-x: hidden to prevent horizontal drift.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

austinpickett · 2026-05-19T18:47:21Z

+    overflow-y: auto;
+  }
+
+  body,


combine above

@media (max-width: 768px) { html, body, #root { min-height: 100dvh; height: auto; max-height: none; overflow-x: hidden; overflow-y: auto; } }

Done — combined the mobile html, body, and #root overrides into one rule as requested. Validation: git diff --check origin/codex/fix-28051-mobile-dashboard-scroll..HEAD -- web/src/index.css passes with no whitespace errors.

sup w/ the PR description, got crazy out of whack - either way, I'm going to pull this down shortly and test it. ideally we have a video or screenshots

wesleysimplicio · 2026-05-20T20:29:57Z

Updated the PR description back into the repository template and reran the focused web validation.\n\nValidation:\n\npowershell\nnpm --prefix web run build\ngit diff --check HEAD -- web/src/index.css\nnpm --prefix web run dev -- --host 127.0.0.1 --port 5177\nnpx playwright screenshot --viewport-size=390,844 http://127.0.0.1:5177 evidence/pr-28577-mobile-390x844.png\n\n\nResult: build passed, whitespace check passed, Vite served HTTP 200, and the mobile screenshot command completed. The generated screenshot stayed out of the source diff.

austinpickett · 2026-05-22T15:38:40Z

@wesleysimplicio Can you attach a before and after video of these changes and what it fixed? I pulled it down and I don't see any difference.

wesleysimplicio · 2026-05-25T02:40:18Z

Aqui está a comparação antes/depois do fix de scroll no mobile 📱

ANTES (esquerda): o conteúdo fica preso — html, body, #root com overflow: hidden impede scroll vertical, mensagens e cards abaixo da dobra ficam invisíveis.

DEPOIS (direita): com a media query @media (max-width: 768px) adicionando overflow-y: auto; min-height: 100dvh; height: auto, o scroll funciona naturalmente e todo o conteúdo fica acessível.

A simulação foi feita num viewport de 375×667 (iPhone SE / Android small). O fix está na web/src/index.css — +12 linhas, sem mudanças em lógica de componente ou layout desktop.

@austinpickett — a diferença fica mais clara quando você redimensiona o navegador pra < 768px de largura. No desktop não muda nada (a media query só ativa em mobile).

…Research#28577) * fix(web): allow mobile dashboard scrolling * fix(web): combine mobile root scroll rules --------- Co-authored-by: Wesley Simplicio <wesley.simplicio.ext@siemens-energy.com>

…Research#28577) * fix(web): allow mobile dashboard scrolling * fix(web): combine mobile root scroll rules --------- Co-authored-by: Wesley Simplicio <wesley.simplicio.ext@siemens-energy.com> #AI commit#

…Research#28577) * fix(web): allow mobile dashboard scrolling * fix(web): combine mobile root scroll rules --------- Co-authored-by: Wesley Simplicio <wesley.simplicio.ext@siemens-energy.com>

fix(web): allow mobile dashboard scrolling

c14f004

wesleysimplicio mentioned this pull request May 19, 2026

feat: Improve mobile responsiveness for Dashboard chat interface #28051

Closed

alt-glitch added type/bug Something isn't working P3 Low — cosmetic, nice to have comp/cli CLI entry point, hermes_cli/, setup wizard javascript Pull requests that update javascript code labels May 19, 2026

austinpickett requested review from austinpickett and Copilot and removed request for Copilot May 19, 2026 10:40

austinpickett requested changes May 19, 2026

View reviewed changes

austinpickett requested a review from Copilot May 19, 2026 10:41

Copilot started reviewing on behalf of austinpickett May 19, 2026 10:41 View session

Copilot AI reviewed May 19, 2026

View reviewed changes

austinpickett requested changes May 19, 2026

View reviewed changes

fix(web): combine mobile root scroll rules

87187ba

austinpickett approved these changes May 28, 2026

View reviewed changes

austinpickett merged commit 10f13c3 into NousResearch:main May 28, 2026
7 of 8 checks passed

alt-glitch mentioned this pull request May 30, 2026

Dashboard: layout broken below 1024px — sidebar off-screen, content unbounded, scroll broken #35520

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): allow mobile dashboard scrolling (#28051)#28577

fix(web): allow mobile dashboard scrolling (#28051)#28577
austinpickett merged 2 commits into
NousResearch:mainfrom
wesleysimplicio:codex/fix-28051-mobile-dashboard-scroll

wesleysimplicio commented May 19, 2026 •

edited

Loading

Uh oh!

austinpickett left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

austinpickett May 19, 2026

Uh oh!

wesleysimplicio May 20, 2026

Uh oh!

austinpickett May 20, 2026

Uh oh!

wesleysimplicio commented May 20, 2026

Uh oh!

austinpickett commented May 22, 2026 •

edited

Loading

Uh oh!

wesleysimplicio commented May 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

wesleysimplicio commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Root cause

Fix

Why this shape

Tests

Related PRs / issues

Solution Sketch

Related Issue

Type of Change

Changes Made

How to Test

Checklist

Code

Documentation & Housekeeping

Screenshots / Logs

Uh oh!

austinpickett left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

austinpickett May 19, 2026

Choose a reason for hiding this comment

Uh oh!

wesleysimplicio May 20, 2026

Choose a reason for hiding this comment

Uh oh!

austinpickett May 20, 2026

Choose a reason for hiding this comment

Uh oh!

wesleysimplicio commented May 20, 2026

Uh oh!

austinpickett commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wesleysimplicio commented May 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wesleysimplicio commented May 19, 2026 •

edited

Loading

austinpickett commented May 22, 2026 •

edited

Loading