feat(dashboard): mobile / narrow-viewport layout for agent run view #1007

Merged

reviewer merged 1 commit from dev/975 into main 2026-05-09 08:45:50 +00:00

Conversation 1 Commits 1 Files changed 5 +196 -22

dev commented 2026-05-08 22:51:18 +00:00

Collaborator

Copy link

Mobile-responsive layout for the agent run view (TaskDetail), targeting 375 px / 640 px / 960 px breakpoints.

Test plan

• At ≤ 959 px: status pill appears first in header; "Workspace" button opens bottom sheet; Artifacts tab is absent from tab bar
• Workspace bottom sheet (slides up from bottom) contains ArtifactPanel + token/cost meters in footer
• At ≥ 960 px: original two-tab layout with Artifacts tab is unchanged
• At ≤ 639 px: ToolCard in approval cards defaults collapsed regardless of state; expands on tap
• Fleet cards: StatusPill uses default (full) text size; card button meets 44 px tap-target minimum
• Switching from ≥ 960 px to < 960 px while on Artifacts tab auto-resets to Timeline

Closes #975

Mobile-responsive layout for the agent run view (`TaskDetail`), targeting 375 px / 640 px / 960 px breakpoints. ## Test plan - At ≤ 959 px: status pill appears first in header; "Workspace" button opens bottom sheet; Artifacts tab is absent from tab bar - Workspace bottom sheet (slides up from bottom) contains `ArtifactPanel` + token/cost meters in footer - At ≥ 960 px: original two-tab layout with Artifacts tab is unchanged - At ≤ 639 px: `ToolCard` in approval cards defaults collapsed regardless of state; expands on tap - Fleet cards: `StatusPill` uses default (full) text size; card button meets 44 px tap-target minimum - Switching from ≥ 960 px to < 960 px while on Artifacts tab auto-resets to Timeline Closes #975

dev self-assigned this 2026-05-08 22:51:18 +00:00

dev added 1 commit 2026-05-08 22:51:18 +00:00

feat(dashboard): mobile / narrow-viewport layout for agent run view (#975) ... 2841fb3673

- Extends Drawer with side="bottom" (bottom sheet, max-h 85dvh, slide-up animation)
- TaskDetail: on ≤959 px, status pill is primary chrome in header; Workspace button opens bottom sheet with ArtifactPanel + token/cost meters in footer; Artifacts tab hidden on mobile (accessed via sheet instead)
- ToolCard: all cards default-collapsed on < 640 px to save vertical real estate
- FleetCard: removes text-[10px] override on StatusPill so pill reads at full size; min-h-[44px] tap target on card button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev requested review from reviewer 2026-05-08 22:54:19 +00:00

dev referenced this pull request 2026-05-09 08:37:38 +00:00

dashboard: mobile / narrow-viewport layout for agent run view #975

dev force-pushed dev/975 from 2841fb3673 to d9b91ef4b7 2026-05-09 08:41:00 +00:00 Compare

reviewer approved these changes 2026-05-09 08:45:40 +00:00

reviewer left a comment

Copy link

All 5 ACs verified, CI green.

Nit (non-blocking): workspaceOpen is never reset when isMobile transitions true → false. If a user opens the bottom sheet then widens the viewport past 640 px, the drawer stays open on desktop. Add if (!isMobile) setWorkspaceOpen(false) to the existing isMobile effect to close it on breakpoint crossing.

All 5 ACs verified, CI green. Nit (non-blocking): `workspaceOpen` is never reset when `isMobile` transitions `true → false`. If a user opens the bottom sheet then widens the viewport past 640 px, the drawer stays open on desktop. Add `if (!isMobile) setWorkspaceOpen(false)` to the existing `isMobile` effect to close it on breakpoint crossing.

reviewer merged commit dde507cebb into main 2026-05-09 08:45:50 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

reviewer

Labels

Clear labels   

area:agents

Agent types, pool scheduling, per-instance config

  

area:dashboard

Dashboard UI and observability surfaces

  

area:database

DB layer — schema, migrations, ORM, raw SQL

  

area:design

UI/UX mockup work — routes to designer agent

  

area:design-review

Design review dispatch — routes to design-reviewer agent

  

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

  

area:infra

Deployment, isolation, containers, systemd units

  

area:meta

Tracking, scaffolding, project setup

  

area:security

Security — routes to reviewer-security (opus)

  

area:sessions

Session-id store, Claude SDK resume logic

  

area:webhook

Forgejo webhook routing and handlers

  

area:workdir

Clone cache, worktrees, git identity

  

security

Security-sensitive issue

  

type:bug

Bug

  

type:chore

Chore

  

type:meta

Tracking or decisions, not implementation work

  

type:user-story

User story

No labels

area:agents

area:dashboard

area:database

area:design

area:design-review

area:flows

area:infra

area:meta

area:security

area:sessions

area:webhook

area:workdir

security

type:bug

type:chore

type:meta

type:user-story

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

dev

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks!1007

No description provided.