Scale the analytics projected-total dot with the bar band on mobile

[gumclaw]

What

Makes the analytics projected end-of-day circle (ProjectedDot in app/javascript/components/Analytics/SalesChart.tsx) scale with the bar band width instead of rendering at a fixed 4px radius: r={Math.min(width / 7, 4)}. On desktop nothing changes (bands are wide, the 4px cap applies). On narrow viewports — where the solid totals-line dots already shrink proportionally (~band/7 in lineProps, Chart.tsx) — the projection marker now shrinks with them instead of dwarfing the actual-sales dot.

Adds two test assertions: the radius formula on the desktop-width render, and a mobile-shaped render (375px container, 31 daily points) verifying the radius comes out below the 4px cap.

Why

Fixes #6089 — Jordi Bruin's follow-up to the projected-total circle shipped in #6076: "on mobile the dot is too big and stands out." The dot should stay subtle/faint at small widths, matching the desktop weight relative to the rest of the chart. This mirrors how the existing line dots handle mobile (#6048 lineage). The anchoring guarantee from #6048/#6053 (dot centered on today's band at any width) is untouched — the cx computation is unchanged and remains covered by the existing centering test.

Before / After

Viewport	Before	After
Desktop (wide bands)	4px faint circle	4px faint circle (unchanged — cap applies)
Mobile 375px, 30-day view	4px circle while line dots shrink to ~1.7px → projection dominates	circle shrinks proportionally (~2.1px), quieter than the solid booked-total dot

Screenshots (hosted preview app)

Captured on the hosted preview (https://fix-projected-dot-mobile-size.apps.staging.gumroad.org, seeded same-day + prior-day sales for seller@gumroad.com, Playwright @2x). In-page assertions ran before each capture: exactly one chart-projected-dot; dot center-x within 0.35px of the last totals-line dot on both widths; dot strictly above the line dot. Measured radii: desktop r=4 (cap applies, unchanged), mobile 375px r≈2.14 — smaller than the totals-line dot (r≈2.8) at that width.

Mobile 375px — the projected circle now renders small and faint, quieter than the solid line dots:

Full page	Chart zoom (3x)

Desktop 1280px — no regression, the 4px cap applies and the circle looks identical to production:

Full page	Chart zoom (2x)

QA steps

1. Open the hosted preview: https://fix-projected-dot-mobile-size.apps.staging.gumroad.org (login seller@gumroad.com / password, 2FA 000000).
2. Go to Dashboard → Sales (/dashboard/sales) with a date range ending on the seller-local today, with ≥1 sale today (seeded on the preview).
3. Desktop: the faint projected circle above today's dot should look identical to production (4px).
4. Narrow the viewport to 375px (or open on a phone): the projected circle should now render small and subtle — clearly quieter than the solid dot on the totals line.

Test Results

✓ app/javascript/components/Analytics/SalesChart.test.tsx (4 tests) 158ms

 Test Files  1 passed (1)
      Tests  4 passed (4)

(vitest run, local, at HEAD of this branch)

AI disclosure

Written by Claude Fable 5 (Hermes agent "gumclaw") running the autonomous dev dispatcher. Instructions: implement the viewport-aware sizing requested in #6089 (keep the #6048 anchoring fix intact), add tests, verify with vitest, and open a PR per CONTRIBUTING.md. Hosted-preview screenshots captured and verified by the same agent.

[gumclaw]

Self-review (fable-style):

• Diff scope: one expression in ProjectedDot (+ explanatory comment) and test additions. The cx/cy anchoring math from Analytics projection tick renders too thick and mispositioned on mobile #6048/Fix analytics projection tick rendering thick and mispositioned on mobile #6053 is untouched; the existing centering test still passes.
• Desktop regression risk: none — for the default 30-day view at desktop widths the band exceeds 28px, so min(width/7, 4) = 4, byte-identical rendering. Verified by the radius assertion in the desktop-width test.
• Proportion choice: /7 mirrors lineProps in Chart.tsx (width / dotCount / 7), so the projection dot tracks the same scale family as the solid line dots and, with the lower 4px cap + 0.5 opacity, always reads quieter than them.
• Degenerate bands: width <= 0 already short-circuits to <g /> above; tiny positive bands produce a tiny positive radius — no NaN (covered by expectNoNaNAttributes in the new mobile test).
• Test infra change: made the mocked ResponsiveContainer width settable per-test (reset in afterEach) instead of hardcoded 800 — no effect on existing tests.

Verdict: PASS, no P1/P2.

[greptile-apps]

Greptile Summary

This PR scales the projected sales marker with the chart band on narrow screens. The main changes are:

• A band-relative radius with a 4px desktop cap.
• Mobile and desktop radius assertions.
• Desktop and mobile QA screenshots.

Confidence Score: 5/5

This looks safe to merge.

No blocking issues found in the changed code.

T-Rex Logs

What T-Rex did

• Validated the preview reachability by inspecting the log and confirming an HTTP 502 response in the preview path.
• Observed the mobile focused test failed with a temporary baseline radius of 4, as shown in the before-state log.
• Updated the responsive implementation and re-ran the focused mobile test, which passed as shown in the after-state log.
• Verified that all four SalesChart projection tests pass, as recorded in the focused-test log.

_{Ran code and verified through T-Rex}

Important Files Changed

Filename	Overview
app/javascript/components/Analytics/SalesChart.tsx	Scales the projected marker radius with the bar width while preserving the 4px cap.
app/javascript/components/Analytics/SalesChart.test.tsx	Adds responsive chart sizing and assertions for mobile and desktop marker radii.

_{Reviews (3): Last reviewed commit: "Add hosted-preview screenshots for the p..." | Re-trigger Greptile}