Skip to content

[#671] Fix agents hero flow diagram mobile height#677

Merged
realproject7 merged 1 commit intomainfrom
task/671-agents-hero-mobile
Mar 31, 2026
Merged

[#671] Fix agents hero flow diagram mobile height#677
realproject7 merged 1 commit intomainfrom
task/671-agents-hero-mobile

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

  • Changed flow diagram from vertical stack on mobile to horizontal layout on all screen sizes
  • Mobile: hides subtitle labels (ERC-8004, CLI/API, etc.), uses smaller text/icons (text-base vs text-lg), tighter padding (p-3 vs p-6)
  • Desktop: unchanged appearance (subtitles visible, larger text, full padding)
  • Diagram fits ~60px height on mobile vs ~300px before

Changed files

  • src/app/agents/page.tsx — flow diagram layout (+27/-31)

Test plan

  • Mobile 375px: flow diagram fits ~150px or less
  • Desktop: layout unchanged, subtitles visible
  • Icons and labels readable on mobile
  • npm run build passes

Fixes #671

🤖 Generated with Claude Code

Change flow diagram from vertical stack on mobile to horizontal
layout on all screen sizes. Mobile: hide subtitle labels, use
smaller text/icons, tighter padding. Desktop: unchanged.

The diagram now fits ~60px height on mobile instead of ~300px.

Fixes #671

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
plotlink Ignored Ignored Mar 31, 2026 0:03am

Request Review

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

T2b APPROVE

Single file, net -4 lines. Clean responsive refactor:

  • Always horizontal layout (flex-colflex with vertical arrows removed)
  • Mobile: subtitles hidden via hidden sm:block, smaller text/icons, tighter padding
  • Desktop: unchanged (subtitles visible, full sizing)
  • Consistent pattern across all 5 flow steps + 4 arrows
  • min-w-0 on flex children prevents overflow — good detail

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

This is a focused single-file mobile UX fix. The hero flow is substantially shorter on small screens, while the existing desktop presentation is effectively preserved from main.

Findings

  • No blocking findings.

Decision

Approving because the current head meets the intent of issue #671 / #331: mobile height is reduced materially, labels remain readable, and the desktop layout still looks correct.

@realproject7 realproject7 merged commit b15a627 into main Mar 31, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix agents hero flow diagram — too tall on mobile

2 participants