Issue Station
Sign In
Tools hereToolbox

hermes - 💡(How to fix) Fix Dashboard: layout broken below 1024px — sidebar off-screen, content unbounded, scroll broken

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…

The dashboard web UI assumes a >=1024px viewport (the Tailwind lg: breakpoint). Below that width the layout switches to mobile mode — the sidebar goes fixed + -translate-x-full (off-screen), and the main content containers lose their viewport-height constraint, expanding to full content height instead of being bounded by the viewport. Since scrollHeight === clientHeight, no scroll container can scroll, making the dashboard unusable for anyone with a non-maximized window or a smaller screen.

Root Cause

Three interrelated issues:

  1. lg: breakpoint dependency — The sidebar was fixed … -translate-x-full by default with lg:sticky lg:translate-x-0 for >=1024px. The root layout used flex-col with lg:flex-row. All layout-critical classes were gated behind the lg: breakpoint.

  2. dvh units not resolving — h-dvh / max-h-dvh (Tailwind for height: 100dvh) was used on the root div, sidebar, and #root. The dvh unit did not resolve correctly in this context — getBoundingClientRect() reported ~5716px instead of the actual viewport height (~919px). Switching to vh (h-screen / max-h-screen) was necessary but still insufficient due to the next issue.

  3. --theme-spacing-mul interferes with Tailwind v4 utility classes — Tailwind v4's @theme inline block overrides the global --spacing variable with calc(0.25rem * var(--theme-spacing-mul, 1)). This multiplier interferes with how h-screen / max-h-screen resolve, causing Tailwind's viewport-height utilities to have no effect. Raw CSS with !important was the only reliable fix.

RAW_BUFFERClick to expand / collapse

Summary

The dashboard web UI assumes a >=1024px viewport (the Tailwind lg: breakpoint). Below that width the layout switches to mobile mode — the sidebar goes fixed + -translate-x-full (off-screen), and the main content containers lose their viewport-height constraint, expanding to full content height instead of being bounded by the viewport. Since scrollHeight === clientHeight, no scroll container can scroll, making the dashboard unusable for anyone with a non-maximized window or a smaller screen.

Root Cause

Three interrelated issues:

  1. lg: breakpoint dependency — The sidebar was fixed … -translate-x-full by default with lg:sticky lg:translate-x-0 for >=1024px. The root layout used flex-col with lg:flex-row. All layout-critical classes were gated behind the lg: breakpoint.

  2. dvh units not resolving — h-dvh / max-h-dvh (Tailwind for height: 100dvh) was used on the root div, sidebar, and #root. The dvh unit did not resolve correctly in this context — getBoundingClientRect() reported ~5716px instead of the actual viewport height (~919px). Switching to vh (h-screen / max-h-screen) was necessary but still insufficient due to the next issue.

  3. --theme-spacing-mul interferes with Tailwind v4 utility classes — Tailwind v4's @theme inline block overrides the global --spacing variable with calc(0.25rem * var(--theme-spacing-mul, 1)). This multiplier interferes with how h-screen / max-h-screen resolve, causing Tailwind's viewport-height utilities to have no effect. Raw CSS with !important was the only reliable fix.

Fixes Applied

ChangeFileDetails
Sidebar always stickyApp.tsxRemoved fixed/-translate-x-full from base; sticky top-0 always, no lg: prefix
Root always flex-rowApp.tsxRoot layout div changed from flex-col to flex-row, removed wrapper divs
Raw CSS height constraintsindex.css[data-layout-variant] { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } and same for its direct child
Viewport root chainindex.csshtml, body, #root { height: 100%; max-height: 100vh; overflow: hidden; }
Removed mobile media queryindex.cssRemoved the @media (max-width: 768px) block that was overriding height constraints

To Reproduce

  1. Open the Hermes dashboard in a browser window narrower than 1024px
  2. Observe: sidebar is hidden off-screen, content area scrolls to full page height instead of viewport, mouse wheel does nothing

Environment

  • Hermes dashboard via hermes dashboard --port 9119 --host 127.0.0.1 --no-open
  • Tested on Windows (but layout CSS is cross-platform)

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

hermes - 💡(How to fix) Fix Dashboard: layout broken below 1024px — sidebar off-screen, content unbounded, scroll broken