cloudflare / cloudflare/cloudflare-os
Workspace view is not responsive: gadget panel clipped, chat squeezed on phones
- Dominant language
- TypeScript
- Stars
- 9.9k
- Forks
- 1.2k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 107
Description
## What happens
On a phone, the workspace view renders the chat pane and the app/gadget panel side-by-side at desktop proportions. The gadget panel is mostly clipped off the right edge of the viewport, and the chat column is squeezed. There is no way to see the gadget UI at a usable width, and no affordance to switch between panes.
Observed on iPhone (Safari, iOS), self-hosted deployment at `aedcda8` (v2 / August 2026 release).
## Why
The app shell is already mobile-aware — `AppShell.tsx` collapses the sidebar into an overlay drawer below `md`, with a hamburger in the top chrome — so the Home / Workspaces / settings pages work fine on a phone.
But the workspace surface itself has no responsive handling at all: `routes/workspace.$id.tsx`, `ChatInterface.tsx`, and `GadgetUI.tsx` contain no media queries, no viewport checks, and no mobile branches. The split layout is fixed regardless of viewport width.
## Suggestion
Below the same `md` breakpoint AppShell already uses, don't render the split: show one pane at a time (stacked, or a chat ⇄ app tab toggle in the workspace header). That matches the pattern the drawer established and would make workspaces usable on phones without touching the desktop layout.
## Question
Is mobile support in scope for Cloudflare OS? It isn't mentioned in the README, docs, or `plans/`, but the deliberate mobile work in AppShell suggests it's intended. If it's on the map, happy to file follow-ups as we hit specific screens; if it's explicitly out of scope for now, knowing that would also be useful.
Contributor guide
Research direction
Start by reading AppShell.tsx to understand its mobile breakpoint and drawer pattern, then inspect routes/workspace.$id.tsx, ChatInterface.tsx, and GadgetUI.tsx to trace the workspace split layout. Done means the workspace panes are usable on a phone, with a way to switch between them, while the desktop layout remains unaffected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100