feat(observer): improve mobile dashboard usability

[noodleonthecape]

Summary

• redesign the observer dashboard for phones by replacing the always-on desktop sidebars with mobile drawers for browse/details views
• rebuild the observer login screen so it works cleanly on phones and better matches the visual treatment on agentrelay.dev
• preserve the existing desktop experience while making the observer flow feel coherent from sign-in through live monitoring

Mobile audit / biggest issues fixed

• the login page used an oversized centered card and hero treatment that wasted vertical space on phones
• the app shell globally hides overflow, so the login experience needed its own scrollable viewport to avoid feeling trapped or clipped on smaller screens
• branding on the login screen felt dashboard-generic instead of using the proper Agent Relay wordmark treatment from the main site
• fixed-width dashboard sidebars forced horizontal overflow on phones and there was no clean mobile navigation path for browsing channels vs. inspecting details

What changed

• redesigned /observer/login into a mobile-first two-part layout with responsive stacking, cleaner spacing, and a dedicated scrollable viewport
• replaced the old oversized Observer heading treatment with the full Agent Relay wordmark plus a separate observer badge/section label
• added supporting feature cards and clearer form copy so the login screen matches the more editorial/marketing feel of the main site
• kept the observer form simple, improved input ergonomics, and tuned the CTA/error presentation for small screens
• desktop sidebar + inspector now stay desktop-only, while mobile uses slide-in overlays
• added mobile header controls in the chat view to open the browse drawer and inspector drawer
• automatically opens the inspector on mobile when a thread or agent profile is selected
• increased tap target sizes and spacing in the sidebar, stream warning, reply links, and panel close/actions
• improved message/thread metadata wrapping, activity event spacing, and long-text behavior in agent metadata/persona sections
• tightened global small-screen behavior with 100dvh, contained overscroll, and consistent box sizing/body margins

Validation

• npm run build --workspace @relaycast/observer-dashboard

Notes

• I validated via production build/type checking in this environment. I did not have an interactive mobile browser emulator here, so visual QA on an actual phone/browser would still be worth a quick pass.

[github-actions]

Preview deployed!

Environment	URL
API	https://pr99-api.relaycast.dev
Health	https://pr99-api.relaycast.dev/health
Observer	https://pr99-observer.relaycast.dev/observer

This preview shares the staging database and will be cleaned up when the PR is merged or closed.

Run E2E tests

npm run e2e -- https://pr99-api.relaycast.dev --ci

Open observer dashboard

https://pr99-observer.relaycast.dev/observer