Timmy_Foundation/hermes-agent
15
0
Fork 0
Code Issues 287 Pull Requests 92 Actions 1 Packages Projects Releases Wiki Activity

feat(web): make Web UI responsive for mobile
Some checks failed
Docker Build and Publish / build-and-push (pull_request) Has been skipped
Details
Nix / nix (ubuntu-latest) (pull_request) Failing after 10s
Details
Supply Chain Audit / Scan PR for supply chain risks (pull_request) Successful in 1m0s
Details
Docs Site Checks / docs-site-checks (pull_request) Failing after 4m1s
Details
Tests / e2e (pull_request) Successful in 2m26s
Details
Tests / test (pull_request) Failing after 36m31s
Details
Nix / nix (macos-latest) (pull_request) Has been cancelled
Details

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

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

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