cloudflare / cloudflare/cloudflare-os

Workspace view is not responsive: gadget panel clipped, chat squeezed on phones

Open
#64 2 comments 0 reactions 0 assignees View on GitHub
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).

Image

## 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.