Final mobile-responsiveness pass on the frontend dashboard

[Gbangbolaoluwagbemiga]

Overview

Do a final pass across common mobile viewport sizes for the dashboard, scan, playground, terminal, and settings pages, fixing any layout breakage before mainnet launch.

Background / Context

A security-tooling dashboard is primarily used on desktop, but a broken mobile experience still reflects poorly on a mainnet-facing product and can block quick on-the-go checks by users.

Goal

All primary pages render usably (no horizontal scroll, no overlapping/clipped content) at common mobile breakpoints (375px, 768px).

Scope of Work

1. Manually test each page under frontend/app/dashboard, scan, playground, terminal, settings at mobile breakpoints.
2. Fix layout issues found (responsive CSS/Tailwind adjustments).
3. Add a Playwright visual-regression snapshot at a mobile viewport for key pages (ties into existing Chromatic setup).

Out of Scope

• Building a dedicated mobile app or PWA.

Acceptance Criteria

• No layout breakage found at 375px/768px on primary pages.
• Mobile-viewport visual-regression snapshot added.

Files & Pointers

• frontend/app/dashboard
• frontend/app/scan
• frontend/app/playground
• frontend/app/terminal
• frontend/docs/VISUAL_REGRESSION_TESTING.md

Dependencies / Related

None blocking.

Difficulty & Estimated Effort

Easy — ~2 days.