---
created: 2026-09-23
status: implemented
requirements:
  - REQ-UI-CHANGES-FILE-ROW-CONTAINMENT-002
system_design:
  - ../../specs/ui/system-design/changes-file-row-containment.md
legacy_specs: []
---

# Implementation Plan: Mobile changes density

## Overview

Restore readable working-tree filenames with compact touch rows and one file
action menu. The user explicitly requested AFK planning and implementation in
one turn, followed by a PR with screenshots. Execute sequentially here.

## Scope

Change working-tree row presentation and its mobile action entry point. Keep
Git semantics, desktop composition, file ordering, and the task toolbar intact.
UI owns the existing reusable file-row presentation contract; no domain or
architecture boundary changes.

## Technical approach

Branch `FileRow` content using the canonical responsive hook. Add a small
touch-content component and shared DropdownMenu action surface, forwarding the
existing callbacks. Reuse translated action labels. Keep `PanelBody` as the
single scroll owner and existing viewport/safe-area handling. Update the public
review guide to describe the touch menu.

## ASCII UI preview

UI-01: Changes tab, unstaged list, phone/coarse pointer.

```text
Before: [+ large] folder/file... [discard] [edit]
After:
  UNSTAGED (8)                       Stage all
  [file] status-surface-metrics.test.ts    [...]
         apps/web/components/task  +12 -3
  [file] long-basename-wraps-onto-
         another-line.test.ts             [...]
         apps/web/components/task

Menu: full/path/status-surface-metrics.test.ts
      Stage file
      Edit
      Discard changes
```

UI-02: Fine-pointer desktop, existing compact row.

```text
  [+] folder/basename.ts              +12 -3 M
  Hover:                             [undo] [edit]
```

Structural requirements: basename receives available width; path/stats below;
one visible secondary action target; menu exposes the full path; 44px touch
targets and preserved desktop density. Pixel spacing is illustrative. Pending
staging shows a spinner and disables its menu item. Cancel discard preserves
the file and returns to the list. Covers AC-002.1 through AC-002.4.

## Tests

Existing `changes-panel-tree.test.tsx` guards tree action wiring. Update the
existing file-row tests for touch menus, pending state, and fine-pointer phones.
Playwright owns rendered geometry, deep-tree containment, and action routing.

## E2E tests

`task/mobile-changes-panel.spec.ts` (mobile-chrome) gains compact-row geometry,
menu/action flow, and breakpoint assertions for all four criteria. Existing
`git/git-changes-panel.spec.ts` (chromium) guards desktop staging and unstaging
and adds the 767px/768px fine-pointer composition transition. The existing
`git/mobile-symlink-identification.spec.ts` follows the file menu to Edit while
retaining symlink-marker containment and viewer checks.

## Work orders

- [x] [Task 01: Compact touch file rows](task-01-compact-touch-file-rows.md)

## Verification results

Completed: 10 mobile browser tests, 4 focused desktop browser tests, 24 file-row
and tree unit tests, typecheck, ESLint, Prettier, staged i18n ratchet, documentation catalog,
36 specification-linter tests, full spec lint, and diff checks passed. The
[work order](task-01-compact-touch-file-rows.md#results) records commands, the
baseline failure, and a temporary desktop-discovery override needed for this
worktree's name. Four inspected screenshots use disposable E2E data and are
published separately from the product branch.

## Risks

Menu close can race confirmation focus; pass the persistent trigger as anchor.
Tree indentation and long paths must not clip touch controls. Existing mobile
tests using inline Unstage must use the menu.