feat(web): make Web UI responsive for mobile

- Nav: icons only on mobile, icon+label on sm+
- Brand: abbreviated "H A" on mobile, full "Hermes Agent" on sm+
- Content: reduced padding on mobile (px-3 vs px-6)
- StatusPage: session cards stack vertically on mobile, truncate
  overflow text, strip model namespace for brevity
- ConfigPage: sidebar becomes horizontal scrollable pills on mobile
  instead of fixed left column, search hidden on mobile
- SessionsPage: title + search stack vertically on mobile, search
  goes full-width
- Card component: add overflow-hidden to prevent content bleed
- Body/root: add overflow-x-hidden to prevent horizontal scroll
- Footer: reduced font sizes on mobile

All changes use Tailwind responsive breakpoints (sm: prefix).
No logic changes — purely layout/CSS adjustments.
This commit is contained in:
Agent 2026-04-13 21:08:33 +00:00 committed by Teknium
parent ac80bd61ad
commit 78fa758451
6 changed files with 49 additions and 46 deletions

View file

@ -74,6 +74,7 @@ body {
scrollbar-color: color-mix(in srgb, var(--color-foreground) 15%, transparent) transparent;
}
html, body {
overflow-x: hidden;
scrollbar-color: color-mix(in srgb, var(--color-foreground) 25%, transparent) transparent;
}
::-webkit-scrollbar { width: 4px; height: 4px; }