mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-05-05 02:31:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat(web): make Web UI responsive for mobile

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

32
web/src/App.tsx
View file

@ -51,7 +51,7 @@ export default function App() {
const PageComponent = PAGE_COMPONENTS[page]; const PageComponent = PAGE_COMPONENTS[page];
return ( return (
<div className="flex min-h-screen flex-col bg-background text-foreground"> <div className="flex min-h-screen flex-col bg-background text-foreground overflow-x-hidden">
{/* Global grain + warm glow (matches landing page) */} {/* Global grain + warm glow (matches landing page) */}
<div className="noise-overlay" /> <div className="noise-overlay" />
<div className="warm-glow" /> <div className="warm-glow" />
@ -59,31 +59,31 @@ export default function App() {
{/* ---- Header with grid-border nav ---- */} {/* ---- Header with grid-border nav ---- */}
<header className="sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-sm"> <header className="sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-sm">
<div className="mx-auto flex h-12 max-w-[1400px] items-stretch"> <div className="mx-auto flex h-12 max-w-[1400px] items-stretch">
{/* Brand */} {/* Brand — abbreviated on mobile */}
<div className="flex items-center border-r border-border px-5 shrink-0"> <div className="flex items-center border-r border-border px-3 sm:px-5 shrink-0">
<span className="font-collapse text-xl font-bold tracking-wider uppercase blend-lighter"> <span className="font-collapse text-lg sm:text-xl font-bold tracking-wider uppercase blend-lighter">
Hermes<br className="hidden sm:inline" /><span className="sm:hidden"> </span>Agent H<span className="hidden sm:inline">ermes </span>A<span className="hidden sm:inline">gent</span>
</span> </span>
</div> </div>
{/* Nav grid — Mondwest labels like the landing page nav */} {/* Nav — icons only on mobile, icon+label on sm+ */}
<nav className="flex items-stretch overflow-x-auto scrollbar-none"> <nav className="flex items-stretch overflow-x-auto scrollbar-none">
{NAV_ITEMS.map(({ id, label, icon: Icon }) => ( {NAV_ITEMS.map(({ id, label, icon: Icon }) => (
<button <button
key={id} key={id}
type="button" type="button"
onClick={() => setPage(id)} onClick={() => setPage(id)}
className={`group relative inline-flex items-center gap-1.5 border-r border-border px-4 py-2 font-display text-[0.8rem] tracking-[0.12em] uppercase whitespace-nowrap transition-colors cursor-pointer shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${ className={`group relative inline-flex items-center gap-1 sm:gap-1.5 border-r border-border px-2.5 sm:px-4 py-2 font-display text-[0.65rem] sm:text-[0.8rem] tracking-[0.12em] uppercase whitespace-nowrap transition-colors cursor-pointer shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
page === id page === id
? "text-foreground" ? "text-foreground"
: "text-muted-foreground hover:text-foreground" : "text-muted-foreground hover:text-foreground"
}`} }`}
> >
<Icon className="h-3.5 w-3.5" /> <Icon className="h-4 w-4 sm:h-3.5 sm:w-3.5 shrink-0" />
{label} <span className="hidden sm:inline">{label}</span>
{/* Hover highlight */} {/* Hover highlight */}
<span className="absolute inset-0 bg-foreground pointer-events-none transition-opacity duration-150 group-hover:opacity-5 opacity-0" /> <span className="absolute inset-0 bg-foreground pointer-events-none transition-opacity duration-150 group-hover:opacity-5 opacity-0" />
{/* Active indicator — dither bar */} {/* Active indicator */}
{page === id && ( {page === id && (
<span className="absolute bottom-0 left-0 right-0 h-px bg-foreground" /> <span className="absolute bottom-0 left-0 right-0 h-px bg-foreground" />
)} )}
@ -91,8 +91,8 @@ export default function App() {
))} ))}
</nav> </nav>
{/* Version badge */} {/* Version badge — hidden on mobile */}
<div className="ml-auto flex items-center px-4 text-muted-foreground"> <div className="ml-auto hidden sm:flex items-center px-4 text-muted-foreground">
<span className="font-display text-[0.7rem] tracking-[0.15em] uppercase opacity-50"> <span className="font-display text-[0.7rem] tracking-[0.15em] uppercase opacity-50">
Web UI Web UI
</span> </span>
@ -102,7 +102,7 @@ export default function App() {
<main <main
key={animKey} key={animKey}
className="relative z-2 mx-auto w-full max-w-[1400px] flex-1 px-6 py-8" className="relative z-2 mx-auto w-full max-w-[1400px] flex-1 px-3 sm:px-6 py-4 sm:py-8"
style={{ animation: "fade-in 150ms ease-out" }} style={{ animation: "fade-in 150ms ease-out" }}
> >
<PageComponent /> <PageComponent />
@ -110,11 +110,11 @@ export default function App() {
{/* ---- Footer ---- */} {/* ---- Footer ---- */}
<footer className="relative z-2 border-t border-border"> <footer className="relative z-2 border-t border-border">
<div className="mx-auto flex max-w-[1400px] items-center justify-between px-6 py-3"> <div className="mx-auto flex max-w-[1400px] items-center justify-between px-3 sm:px-6 py-3">
<span className="font-display text-[0.8rem] tracking-[0.12em] uppercase opacity-50"> <span className="font-display text-[0.7rem] sm:text-[0.8rem] tracking-[0.12em] uppercase opacity-50">
Hermes Agent Hermes Agent
</span> </span>
<span className="font-display text-[0.7rem] tracking-[0.15em] uppercase text-foreground/40"> <span className="font-display text-[0.6rem] sm:text-[0.7rem] tracking-[0.15em] uppercase text-foreground/40">
Nous Research Nous Research
</span> </span>
</div> </div>

2
web/src/components/ui/card.tsx
View file

@ -4,7 +4,7 @@ export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
return ( return (
<div <div
className={cn( className={cn(
"border border-border bg-card/80 text-card-foreground", "border border-border bg-card/80 text-card-foreground overflow-hidden w-full",
className, className,
)} )}
{...props} {...props}

1
web/src/index.css
View file

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

14
web/src/pages/ConfigPage.tsx
View file

@ -343,12 +343,12 @@ export default function ConfigPage() {
</Card> </Card>
) : ( ) : (
/* ═══════════════ Form Mode ═══════════════ */ /* ═══════════════ Form Mode ═══════════════ */
<div className="flex gap-4" style={{ minHeight: "calc(100vh - 180px)" }}> <div className="flex flex-col sm:flex-row gap-4" style={{ minHeight: "calc(100vh - 180px)" }}>
{/* ---- Sidebar ---- */} {/* ---- Sidebar — horizontal scroll on mobile, fixed column on sm+ ---- */}
<div className="w-52 shrink-0"> <div className="sm:w-52 sm:shrink-0">
<div className="sticky top-[72px] flex flex-col gap-1"> <div className="sm:sticky sm:top-[72px] flex flex-col gap-1">
{/* Search */} {/* Search */}
<div className="relative mb-2"> <div className="relative mb-2 hidden sm:block">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" /> <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
<Input <Input
className="pl-8 h-8 text-xs" className="pl-8 h-8 text-xs"
@ -367,7 +367,8 @@ export default function ConfigPage() {
)} )}
</div> </div>
{/* Category nav */} {/* Category nav — horizontal scroll on mobile */}
<div className="flex sm:flex-col gap-1 overflow-x-auto sm:overflow-x-visible scrollbar-none pb-1 sm:pb-0">
{categories.map((cat) => { {categories.map((cat) => {
const isActive = !isSearching && activeCategory === cat; const isActive = !isSearching && activeCategory === cat;
return ( return (
@ -397,6 +398,7 @@ export default function ConfigPage() {
})} })}
</div> </div>
</div> </div>
</div>
{/* ---- Content ---- */} {/* ---- Content ---- */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">

6
web/src/pages/SessionsPage.tsx
View file

@ -227,7 +227,7 @@ function SessionRow({
)} )}
</div> </div>
<div className="flex items-center gap-1.5 text-xs text-muted-foreground"> <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
<span className="truncate max-w-[180px]">{(session.model ?? "unknown").split("/").pop()}</span> <span className="truncate max-w-[120px] sm:max-w-[180px]">{(session.model ?? "unknown").split("/").pop()}</span>
<span className="text-border">&#183;</span> <span className="text-border">&#183;</span>
<span>{session.message_count} msgs</span> <span>{session.message_count} msgs</span>
{session.tool_call_count > 0 && ( {session.tool_call_count > 0 && (
@ -374,7 +374,7 @@ export default function SessionsPage() {
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{/* Header outside card for lighter feel */} {/* Header outside card for lighter feel */}
<div className="flex items-center justify-between"> <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<MessageSquare className="h-5 w-5 text-muted-foreground" /> <MessageSquare className="h-5 w-5 text-muted-foreground" />
<h1 className="text-base font-semibold">Sessions</h1> <h1 className="text-base font-semibold">Sessions</h1>
@ -382,7 +382,7 @@ export default function SessionsPage() {
{total} {total}
</Badge> </Badge>
</div> </div>
<div className="relative w-64"> <div className="relative w-full sm:w-64">
{searching ? ( {searching ? (
<div className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 animate-spin rounded-full border-[1.5px] border-primary border-t-transparent" /> <div className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 animate-spin rounded-full border-[1.5px] border-primary border-t-transparent" />
) : ( ) : (

38
web/src/pages/StatusPage.tsx
View file

@ -173,20 +173,20 @@ export default function StatusPage() {
{activeSessions.map((s) => ( {activeSessions.map((s) => (
<div <div
key={s.id} key={s.id}
className="flex items-center justify-between border border-border p-3" className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
> >
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1 min-w-0 w-full">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-medium text-sm">{s.title ?? "Untitled"}</span> <span className="font-medium text-sm truncate">{s.title ?? "Untitled"}</span>
<Badge variant="success" className="text-[10px]"> <Badge variant="success" className="text-[10px] shrink-0">
<span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" /> <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
Live Live
</Badge> </Badge>
</div> </div>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground truncate">
<span className="font-mono-ui">{s.model ?? "unknown"}</span> · {s.message_count} msgs · {timeAgo(s.last_active)} <span className="font-mono-ui">{(s.model ?? "unknown").split("/").pop()}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
</span> </span>
</div> </div>
</div> </div>
@ -208,23 +208,23 @@ export default function StatusPage() {
{recentSessions.map((s) => ( {recentSessions.map((s) => (
<div <div
key={s.id} key={s.id}
className="flex items-center justify-between border border-border p-3" className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
> >
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1 min-w-0 w-full">
<span className="font-medium text-sm">{s.title ?? "Untitled"}</span> <span className="font-medium text-sm truncate">{s.title ?? "Untitled"}</span>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground truncate">
<span className="font-mono-ui">{s.model ?? "unknown"}</span> · {s.message_count} msgs · {timeAgo(s.last_active)} <span className="font-mono-ui">{(s.model ?? "unknown").split("/").pop()}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
</span> </span>
{s.preview && ( {s.preview && (
<span className="text-xs text-muted-foreground/70 truncate max-w-md"> <span className="text-xs text-muted-foreground/70 truncate">
{s.preview} {s.preview}
</span> </span>
)} )}
</div> </div>
<Badge variant="outline" className="text-[10px]"> <Badge variant="outline" className="text-[10px] shrink-0 self-start sm:self-center">
<Database className="mr-1 h-3 w-3" /> <Database className="mr-1 h-3 w-3" />
{s.source ?? "local"} {s.source ?? "local"}
</Badge> </Badge>
@ -258,10 +258,10 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
return ( return (
<div <div
key={name} key={name}
className="flex items-center justify-between border border-border p-3" className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 min-w-0 w-full">
<IconComponent className={`h-4 w-4 ${ <IconComponent className={`h-4 w-4 shrink-0 ${
info.state === "connected" info.state === "connected"
? "text-success" ? "text-success"
: info.state === "fatal" : info.state === "fatal"
@ -269,8 +269,8 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
: "text-warning" : "text-warning"
}`} /> }`} />
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5 min-w-0">
<span className="text-sm font-medium capitalize">{name}</span> <span className="text-sm font-medium capitalize truncate">{name}</span>
{info.error_message && ( {info.error_message && (
<span className="text-xs text-destructive">{info.error_message}</span> <span className="text-xs text-destructive">{info.error_message}</span>
@ -284,7 +284,7 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
</div> </div>
</div> </div>
<Badge variant={display.variant}> <Badge variant={display.variant} className="shrink-0 self-start sm:self-center">
{display.variant === "success" && ( {display.variant === "success" && (
<span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" /> <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
)} )}