SVB-SCOUT-LISTING-REBUILD-001

Scout Listing Page — Mobile-first Rebuild v1

Proposed responsive layout before runit. Four phone states + desktop split. Swipe photo strip on phones; 3-up scroll on desktop. Contact form lives in main column below 1024px.

→ Open full desktop mockup (1280px)

New / replaced Mobile fix Unchanged pattern

Photos + Actions

ScrollablePhotoGallery replaces static hero. Action bar: showing, email, call. No fav/share here (nav owns them).

← 1336 St Jacques St

♡

↗

1 / 18

2 / 18

3 / 18

Annual costs ↓ Details About

$649,900

1336 St Jacques Street, Ottawa

3 bed · 2 bath · 1,840 sqft · Detached

A DealNew

$649,900

Bryon Bertrim · REALTOR®

Contact + Map

Sidebar content in main column <1024px. 16px inputs prevent iOS zoom. Rooms table scrolls horizontally.

←Contact agent

📍 Map preview

Contact Bryon about this listing

Bryon Bertrim

613.591.9990 · REALTOR®

Name

Phone

Message

Room dimensions

Room	Level	Size
Living	Main	5.2m × 4.1m
Kitchen	Main	3.8m × 3.2m
Primary	2nd	4.5m × 3.9m

$649,900

Bryon Bertrim

Annual Costs

2-col summary on mobile. Stacked inputs. 3-col mortgage compare fits 375px. Breakdown table scrolls.

←Annual costs

Monthly all-in

$3,842

Mortgage

$2,980

Tax + fees

$862

Cost breakdown

Mortgage

Property tax

Hydro + insurance

List price Down payment % Interest rate %

5 yr fixed

$2,980

Variable

$2,841

25 yr amort

$2,712

$649,900

Tablet (768px)

2 photos visible in strip. Nav tabs visible. Contact still in main column until 1024px.

←

OverviewDetailsCosts

$649,900

1336 St Jacques Street

Quick contact

Form + map in main column

$649,900

Desktop ≥1024px — sidebar returns

← Back to map

OverviewPropertyRoomsAnnual costsAbout

♡ ↗

1/18

2/18

3/18

$649,900

1336 St Jacques Street, Ottawa K1Y 2E8

3 bed · 2 bath · 1,840 sqft · Listed 12 days

Annual cost calculator (responsive 4-col summary on desktop)

Monthly

$3,842

Mortgage

$2,980

Tax

$612

Other

$250

Bryon Bertrim

613.591.9990

Map + links

Name

Phone

Implementation notes (for PROMPT / runit)

Shared subcomponents: Extract ScoutListingMapCard, ScoutListingAgentContact — render in sidebar ≥1024px and main column <1024px (single form state, one mount in detail).
Photos: Replace ListingPhotoGrid with ScrollablePhotoGallery per PROMPT addendum — swipe + dots + thumbs; desktop 3-up via CSS.
CTA dedupe: Favourite/share only in nav. Action bar: showing, email, call, map links, costs chip. Pick one primary showing CTA on mobile (sticky bar OR inline, not both crowding).
Cost calculator: useMediaQuery('(max-width: 768px)') or CSS classes for 2-col → 4-col summary; stack chart below inputs on mobile.
CMHC: Fix double-count before ship — loan amortization OR closing line, not both in bars + breakdown.
Test widths: 320, 375, 390, 768, 1024 px — no horizontal overflow in main scroll column.