On the go
What works on mobile
Madi works on a phone for review and the most common edits — open a task, mark it done, post a comment, reassign someone. The full Gantt chart needs a wider screen: drag-to-reschedule, dependency arrows, and dense keyboard shortcuts don't translate to touch.
What works on a phone
- Read any project — title, description, dates, assignee, progress, comments. Tap a task to open its detail sheet.
- Filter the task list by Mine / Past due / Done; search by name within the project.
- Mark a task done, or set progress with 0 / 25 / 50 / 75 / 100% chips.
- Reassign — tap the assignee row to open an inline picker with every project member.
- Read the comment thread and post new comments (plain text) from the same sheet.
- Glance across projects via the portfolio card view — every project shows status, progress, members, owner, and date range as a tappable card.
- Manage workspace members + roles and edit project settings (sectioned forms; the same controls as desktop, reflowed to fit).
What still needs desktop
- The Gantt chart itself — drag-to-reschedule, dependency drawing, multi-select, the critical-path overlay, and the inline editing of any cell. Below 900px the chart isn't rendered at all (heavy listeners aren't even mounted).
- Creating new tasks, phases, or subtasks. The mobile sheet edits existing rows; new ones go through the chart.
- Drawing or editing dependencies (FS / SS / FF / SF, lag, soft links). The arrow-drag affordance is desktop-only.
- Rich-text editing — bold/italic/lists, @-mentions, attachments. The mobile comment composer is plain text; existing rich-text comments still render correctly.
- Progress notes editor. Mobile shows the count and a “open on desktop” pointer; the editor for progress notes is desktop-only.
- The four secondary views (List, Calendar, Kanban, Workload) — they live with the chart at desktop widths.
- Baselines + variance, cross-project link management, templates editing, the resource (Workload) view, share-link toggles, and any wide-table inspector.
Two breakpoints, not one
The Gantt chart specifically is gated at 900px — its drag handles + dense keyboard shortcuts can't translate to touch even on a tablet-sized phone in landscape. Below 900px the chart never renders; phones get the dedicated mobile project view instead.
Everything else — portfolio, workspace, settings, account — uses 768px (Tailwind's md: cutoff). Below 768px those surfaces switch to mobile layouts (card stacks, bottom sheets, stacked forms). Above 768px, including iPad in landscape, the desktop layout reads cleanly.
Detection is two-pass: the server reads the request's User-Agent for the initial SSR (so iPhone visitors don't see a frame of desktop UI flickering in), then the client measures the actual viewport after hydration and adjusts if the UA pin disagreed.
“Do other people's edits appear live on my phone?”
No — mobile doesn't subscribe to the realtime channel. Edits land via the standard save path; your sheet refetches when you open it, so closing and reopening picks up anything posted in the meantime. Battery drain + mobile-network flakiness made the always-on WebSocket the wrong default for a phone where most sessions are a few edits long.
“What about my iPhone Pro Max in landscape?”
Landscape phone widths can exceed 900px (Pro Max lands around 932), but the chart still hides — the User-Agent pin says “phone,” and the chart's interactions need a mouse + keyboard regardless of how many pixels are available. iPads land on desktop UAs in either orientation.
Recap
- Glance + light edits — any phone. Read, filter, search, mark done, set progress, reassign, comment.
- Planning — desktop. Chart drag, dependencies, new rows, baselines, templates, the four secondary views.
- Two breakpoints — 900px gates the chart, 768px gates everything else.
- No realtime on phones — edits revalidate on save; reopen a sheet to refresh.