Mission Control Mobile Responsive View

Exec Summary

Mission Control is desktop-only. This spec makes the existing list view and editor responsive using Tailwind breakpoints so MC works on a phone without building separate mobile components. One list component, one editor component, responsive CSS. Every future feature (artifact links, projects, new fields) only needs to be built once.

1. Problem Statement and Goal

Problems

1. I can't check on work from my phone. MC is accessible via Tailscale on my iPhone, but the board is unusable. Columns overflow the viewport, text gets cut off, and I have to pinch-zoom and scroll horizontally just to read task titles. When I'm away from my desk and want to check what's in progress or what needs my review, I can't.

2. The editor doesn't fit a phone screen. The task editor modal is 680px wide. My phone screen is 390px. The modal overflows, fields get clipped, and tapping small buttons is unreliable. I can't make even a simple status change on mobile without fighting the UI.

3. Touch targets are too small. Buttons, dropdowns, and card tap areas were designed for mouse precision. On a touchscreen, I misfire constantly. The board was built for desktop interaction and it shows.

Goal

MC should be a useful companion on my phone for checking task status, reading details, and making quick edits. Not a separate app, not a rebuilt interface. The same views I use on desktop should adapt to a narrow screen so I can glance at the board from anywhere.

2. Success Metric

I can pull up MC on my phone during a conversation, check what's in needs-review, tap into a task to read its details, and change a status. The whole interaction takes under 15 seconds and I never have to scroll horizontally or pinch-zoom.

3. Current State

• Board renders at full desktop width with no responsive breakpoints
• Editor modal is fixed at 680px
• No @media queries for mobile in the task components
• Tailwind v4 is available (already used in MC) but no responsive utility classes are used in task components
• Linear mobile research brief completed: artifacts/research_linear_mobile_patterns.md

4. Platform Capabilities

MC is a Next.js app with Tailwind CSS v4. Tailwind's responsive utilities (sm:, md:, lg:) work out of the box. No additional libraries needed for responsive layout.

5. Community Patterns

See the Linear Mobile Patterns research brief for detailed analysis. Key borrowings:

• Single-row list cards with icon-only metadata on the right
• Sticky status group headers
• Bottom navigation bar for view switching
• Slide-up sheet for detail view instead of centered modal

6. Options

Option A: Separate mobile components

Build a dedicated MobileTaskList and MobileTaskSheet alongside the existing desktop components. Viewport detection switches between them.

Pros: Purpose-built for touch. Can optimize independently. Cons: Every new feature (artifact links, projects, new fields) must be built twice. Two list components, two editors. Maintenance tax grows with every future spec.

Option B: Make existing components responsive

Add Tailwind responsive breakpoints to TaskListView and TaskEditorModal. Same components render differently at narrow viewports. Hide board view below 768px, default to list. Editor goes full-width on mobile.

Pros: One list component, one editor. Future features only built once. Lowest maintenance cost. Fastest to build. Cons: May need some layout compromises where desktop and mobile needs diverge significantly.

Option C: Option B + slide-up sheet editor

Same responsive approach as B, but replace the modal with a slide-up bottom sheet on mobile for a more native-feeling interaction.

Pros: Better mobile UX for the editor specifically. Still one list component. Cons: Sheet interaction (swipe-to-dismiss, gesture handling) adds complexity. Can be added later as a refinement.

7. Recommendation

Option B. Pete raised the maintainability concern directly: separate mobile components mean every future change has to be made in multiple places. Responsive CSS on existing components eliminates that tax. The slide-up sheet (Option C) is a nice refinement we can add later if the full-width modal feels clunky on a real phone.

Breakpoint strategy

• ≥768px: Board and list views available (current behavior, unchanged)
• <768px: List view only (board hidden), editor goes full-width

Responsive list view changes (TaskListView)

The existing list view already has the right anatomy: rows with status, title, priority, assignee. At narrow viewports:

• Row height increases to 48px minimum (touch-friendly tap targets)
• Metadata collapses to icons only (no text labels)
• Title truncates with ellipsis, single line
• Assignee shows avatar only, no name
• Blocked indicator: small red dot badge on avatar
• Status group headers become sticky on scroll
• Group headers show status name + task count, tap to collapse/expand

No new component. Same TaskListView with responsive Tailwind classes.

Responsive editor changes (TaskEditorModal)

Below 768px:

• Modal width changes from 680px fixed to 100vw with safe-area padding
• Modal height becomes ~95vh with internal scroll
• All form fields stack vertically, full width
• Dropdowns and buttons get larger tap targets (min 44px)
• Same fields, same save logic, same data model

Board view on mobile

Hidden below 768px. The board's column layout doesn't work on narrow screens and forcing it would mean compromising the desktop experience. List view is the right surface for mobile.

Desktop changes

None. All responsive changes are additive via md: / lg: Tailwind prefixes.

8. Security Considerations

None. Same data, same API, just different layout.

9. Pete's Setup Checklist

None.

10. Implementation Scope

David builds:

1. TaskListView responsive updates:

• Add Tailwind responsive classes for narrow viewports
• Row height 48px min below 768px
• Metadata collapses to icons only (status circle, priority icon, assignee avatar)
• Title single-line with ellipsis truncation
• Sticky status group headers with collapse/expand
• Blocked indicator (red dot badge on avatar)

1. TaskEditorModal responsive updates:

• Below 768px: width 100vw, height ~95vh, internal scroll
• All fields stack vertically, full width
• Tap targets minimum 44px
• No new component; same modal with responsive breakpoints

1. TasksWorkspace viewport logic:

• Below 768px: hide board view, default to list
• Hide board/list toggle on mobile (list only)
• Same task state, save handlers, and polling logic

1. Tailwind/CSS additions:

• Responsive utility classes on existing components
• Touch-friendly spacing at narrow breakpoints
• No new CSS framework or component library

11. Validation Criteria

• At 375px viewport width: list view renders, no horizontal scroll
• At 768px+: desktop board renders (unchanged)
• Tapping a list row opens the editor (full-width modal)
• All task fields are editable in the mobile editor
• Status group headers are sticky on scroll
• Blocked tasks show red indicator
• Editor dismisses normally (close button, backdrop tap)

12. Test Plan

Test 1: Viewport switch

• Open MC at full desktop width, verify board view renders normally
• Resize browser to <768px, verify switch to list view
• Resize back to >768px, verify return to board view
• Pass: Clean switch at breakpoint, no layout artifacts

Test 2: Mobile list rendering

• At 375px width, verify all tasks are visible
• Verify grouping by status with correct headers and counts
• Verify no horizontal scrollbar
• Pass: All tasks visible, grouped, no overflow

Test 3: Task interaction

• Tap a task in the mobile list
• Verify editor opens full-width
• Edit the title, change status, save
• Verify changes persist after closing
• Pass: Full edit cycle works on mobile

Test 4: Sticky headers

• At mobile width, scroll through a long task list
• Verify the current status group header stays pinned at top
• Pass: Header is sticky during scroll

Test 5: Real device test

• Load MC on an actual iPhone via Tailscale URL
• Navigate the task list, open a task, make an edit
• Pass: Usable on real hardware

13. Category

Tool - responsive UI addition to Mission Control

14. Context Loading

• Build time: this spec + Linear mobile research brief + existing MC component structure
• Runtime: same task data, no additional context

15. Guardrails

• Do not change the desktop board layout. Mobile is additive only.
• Do not introduce a CSS framework beyond Tailwind. No Bootstrap, no Chakra.
• Do not add user identity/auth. "Mine" filter can come later.
• Test at 375px (iPhone SE), 390px (iPhone 14), and 430px (iPhone 14 Pro Max).
• Preserve all existing keyboard shortcuts and desktop interactions.

16. Handoff

• David builds the components
• Vinny tests at multiple viewport widths + real device
• Vinny moves to needs-review, assigns to Pete
• Pete tests on his phone via Tailscale