Description
The Ambient Code Platform UI has several layout and rendering issues when accessed on mobile devices (observed on iPhone via Safari).
Problems Observed
1. Sidebar navigation overlaps content
When the sidebar is opened on a narrow viewport, it overlaps the main content area. Session titles in the "Recents" list are heavily truncated. The sidebar doesn't adapt well to small screens — it should either use a full-screen drawer pattern or slide the content aside.
2. Chat input area — large empty space
On the main chat view, the content area above the input toolbar is collapsed or missing, leaving a large empty black space occupying most of the screen. The bottom toolbar (Agents, Commands, model selector, team selector) renders but the chat message area doesn't fill the available viewport height.
3. Session detail view — cramped header and toolbar
In the session detail/chat view, the header tabs ("Chat", "Explorer", "Integrations") are tightly packed and hard to tap. The bottom chat input toolbar icons are similarly cramped on small screens. The overall layout doesn't gracefully adapt to mobile widths.
Expected Behavior
The UI should be usable on mobile viewports:
- Sidebar should use a mobile-friendly drawer pattern (full-width overlay or slide)
- Chat content area should fill available viewport height using flex/grid layout
- Header tabs and toolbar controls should have adequate touch targets (minimum 44x44px per Apple HIG)
- Text truncation should be handled gracefully with tooltips or expandable titles
Screenshots
Environment
- Device: iPhone
- Browser: Safari
- Platform version: v0.2.5
Description
The Ambient Code Platform UI has several layout and rendering issues when accessed on mobile devices (observed on iPhone via Safari).
Problems Observed
1. Sidebar navigation overlaps content
When the sidebar is opened on a narrow viewport, it overlaps the main content area. Session titles in the "Recents" list are heavily truncated. The sidebar doesn't adapt well to small screens — it should either use a full-screen drawer pattern or slide the content aside.
2. Chat input area — large empty space
On the main chat view, the content area above the input toolbar is collapsed or missing, leaving a large empty black space occupying most of the screen. The bottom toolbar (Agents, Commands, model selector, team selector) renders but the chat message area doesn't fill the available viewport height.
3. Session detail view — cramped header and toolbar
In the session detail/chat view, the header tabs ("Chat", "Explorer", "Integrations") are tightly packed and hard to tap. The bottom chat input toolbar icons are similarly cramped on small screens. The overall layout doesn't gracefully adapt to mobile widths.
Expected Behavior
The UI should be usable on mobile viewports:
Screenshots
Environment