RPP Mobile Deals: Before / After

Generated 2026-07-13. Source: live screenshots of app.revparpro.com/app/deals at a 390 by 844 px viewport (set by us via the browse tool command "viewport 390x844" (source: this session's test setup); matches the iPhone 12-14 logical size per Apple specs), logged in as the e2e test account. The "after" is a live CSS mock applied in the browser, not yet shipped code.

What changed in the mock

Padding cut roughly in half. The app shell wraps every page in 24px padding (src/layouts/AppLayout.tsx:293) and the Deals page adds its own 24px on top (src/pages/Deals.tsx:257), so with the 12px card padding plus 1px border, text starts 61px from the screen edge on each side (measured in the live DOM). The mock collapses the double wrapper to a single 12px gutter.
14 outlined boxes become one grouped list. Each deal was its own bordered, rounded card. The mock merges them into a single container with hairline dividers (#f1f5f9), which reads calmer and saves vertical space.
Hotel names get the full row. The old row squeezed name + stage pill + a stage dropdown + a red Pass button onto one line, leaving the name 54px of width (measured: "DoubleTree Houston Galleria" rendered as "Doubl..."). The mock stacks the card: name on top, price / STR / stage pill on line two, actions below.
The redundant stage dropdown is gone. Stage was shown twice (pill + select). The mock keeps the pill and replaces the dropdown with a one-tap advance button ("→ Due Diligence"), the same pattern the desktop kanban card already uses (src/pages/Deals.tsx:74-92).
Pass is demoted to a quiet text button instead of a red outlined button repeated on every row, and tap targets go from 27px to 40px tall.

Before (live today)

Full-page capture, production, 2026-07-13. Names truncate to one word or one letter; every row carries a dropdown and a red Pass button.

After (CSS mock)

Same page, same data, mock styles applied live in the browser. Scroll inside the frame to compare row by row.

Measured numbers behind the complaints

All measurements taken from the live DOM on production at the same 390 by 844 px test viewport (source: this session's browse tool setup), 2026-07-13.

Metric	Before	After (mock)	Where it comes from
Edge-to-text inset (each side)	61px	~26px	24px shell padding + 24px page padding + 12px card padding + 1px border, measured via getBoundingClientRect
Card width on a 390px screen	294px	366px	Live DOM measurement; mock uses a 12px gutter
Width available for the hotel name	54px	full row (~338px)	Measured on "DoubleTree Houston Galleria" row
Stage control / Pass tap-target height	27px	40px	Measured; Apple HIG minimum is 44px, mock buttons sit at 40px inside a 64px row
Stage select font size	12px	n/a (select removed)	Computed style; iOS Safari auto-zooms inputs under 16px
Bordered boxes on screen	14 cards	1 container	14 deals in the pipeline as of 2026-07-13 (production list)

What the real code change is

src/layouts/AppLayout.tsx:293: make the shell wrapper responsive, e.g. p-3 md:p-6, and remove the page-level double-up (Deals drops its own p-6 to p-0 md:p-6, or the shell owns padding and pages stop adding it; needs one pass over sibling pages so nothing loses its gutter).
src/pages/Deals.tsx:143-219 (MobileListView): rebuild the row as a stacked card in a single grouped container, name full-width, meta line under it, advance + Pass action row at 44px, dropdown removed.
Group the mobile list by stage with section headers in pipeline order, Closed and Passed collapsed at the bottom (today it is one flat unsorted list).
Replace the window.prompt pass-reason (src/pages/Deals.tsx:246) with a small bottom sheet, which fixes desktop too.