mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-30 07:51:45 +08:00
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:
@@ -227,7 +227,7 @@ function SessionRow({
|
||||
)}
|
||||
</div>
|
||||
<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">·</span>
|
||||
<span>{session.message_count} msgs</span>
|
||||
{session.tool_call_count > 0 && (
|
||||
@@ -374,7 +374,7 @@ export default function SessionsPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* 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">
|
||||
<MessageSquare className="h-5 w-5 text-muted-foreground" />
|
||||
<h1 className="text-base font-semibold">Sessions</h1>
|
||||
@@ -382,7 +382,7 @@ export default function SessionsPage() {
|
||||
{total}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="relative w-64">
|
||||
<div className="relative w-full sm:w-64">
|
||||
{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" />
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user