Responsive Audit · 2026-05-19

Scope

Mission: audit + fix overlap, text débordement, tap-target, hero crop across the full route set (28 EN + 28 FR + samples) on 4 viewports x 2 themes.

Routes covered (61 unique):

• 28 EN core: /, /companies/, /insiders/, /performance/, /methodologie/, /how-it-works/, /pricing/, /backtest/, /blog/, /faq/, /contact/, /docs/, /recommendations/, /picks/ (404), /clusters/, /newsletter/, /historical-archive/, /heatmap/, /top-movers/, /leaderboard/insiders/, /sectors/, /sandbox/, /glossary/, /auth/login/, /auth/register/, /account/, /portfolio/
• 28 FR mirrors under /fr/*
• 5 detail samples: /company/lvmh/, /company/cogelec-6594/, /company/atos-se-2826/, two /blog/<slug>/

Viewports: mobile 390x844, tablet 768x1024, laptop 1280x800, desktop 1920x1080. Themes: light + dark (forced via localStorage["it-theme"]).

Method

Playwright headless Chromium with bypassed CMP (consent_v1=accepted) and forced theme. For each route + viewport + theme, capture:

• Document scroll-width vs viewport width (overflow detector)
• Offender elements: tag, class, x-extent
• Mobile tap targets < 40x40
• KPI cards / score components scroll-width > client-width
• <h1> truncation
• <table> elements wider than viewport without an overflow-x:auto parent

Audit script: scripts/_responsive-audit-focused.mjs Per-route metrics: docs/method-review/screenshots/responsive-2026-05-19/before/report.json Screenshot dir: docs/method-review/screenshots/responsive-2026-05-19/

Operational note

The audit was executed against the dev server (next dev). Dev mode compiles on first request and the cold compile of heavier routes (/backtest/, /performance/, /methodologie/) caused the parallel runner to stall. The audit script is parked as a re-runnable artifact for prod-build follow-up.

Static analysis of the codebase identified the root patterns; CSS fixes are defensive and scoped so they apply to every page sharing those classes regardless of which specific screenshot triggered detection.

Issues identified

#	Issue	Severity	Root location
1	RecoCard 9-column inline grid has no mobile fallback (overflow < 768px)	High	src/components/RecoCard.tsx:362 (inline grid)
2	Tables in <article> / .prose / /blog/ lack overflow-x:auto wrapper	High	Markdown-rendered blog content
3	Landing hero h1 floor 3rem too large at 320px / iPhone SE	Med	src/styles/landing.css:117
4	CookieBanner can cover hero CTA on short viewports (max-height:640px)	Med	src/components/cmp/CookieBanner.tsx:131
5	Landing KPI / signal / bento grids lacked min-width:0 on children	Med	src/styles/landing.css:188+
6	Score gauge fixed 80px width crowds mobile < 640px	Med	RecoCard ScoreSpine
7	Long ISIN / ticker pills could overflow narrow chip containers	Low	.ticker, .isin, .iso-badge
8	AppFooter columns risk overflow on long localized labels	Low	src/components/AppFooter.tsx
9	AppNav mobile drawer lacked explicit max-width:100vw clip	Low	src/components/AppNav.tsx
10	Methodologie chapter annotations needed max-width:calc(100vw - 32px)	Low	src/app/methodologie/_components/*
11	Modals / drawers other than CMP lacked viewport-bound clip	Low	global
12	Section CTAs (.lnd-cta-section__title) floor too large at 320px	Med	src/styles/landing.css:1007
13	Tap-target floor on .reco-row interactive children	Med	RecoCard

Top 30 fixes shipped

All fixes consolidated in src/app/globals.css under the RESPONSIVE AUDIT 2026-05-19 section (line ~4815):

1. .reco-row-grid mobile collapse: 9-col -> 3-col with named grid areas (logo company score / meta meta meta)
2. .reco-row-grid > nth-child(1) (rank) and (9) (chevron) hidden < 768px
3. .reco-row-grid meta children (date, role, pct, amount) packed into single flex strip on row 2
4. Score gauge width 80px -> 64px on < 640px
5. Defensive tap-target halo (::after inset:-8px) for .reco-row a/button without affecting layout
6. .prose table, .docs table, article table, .blog-content table gain display:block; overflow-x:auto
7. section table, main table, div > table get scroll-wrapper fallback at < 768px
8. .lnd-hero__h1 font floor lowered to 2.25rem at < 380px
9. .lnd-hero__h1 letter-spacing tightened on small viewports
10. .lnd-cta-section__title floor lowered to 1.65rem at < 380px
11. .lnd-features__title, .lnd-track__headline, .lnd-hiw__title floor lowered at < 380px
12. CookieBanner padding shrunk to 14px on (max-height:640px) and (max-width:480px)
13. CookieBanner body / eyebrow margins reduced on short viewports
14. CookieBanner accept button padding tightened on short viewports
15. .lnd-kpis__grid > * enforced min-width:0 (prevent tabular num overflow)
16. .lnd-signals__grid > * enforced min-width:0
17. .lnd-bento > * enforced min-width:0
18. .lnd-track__inner > * enforced min-width:0
19. [data-methodologie-annotation], .ch-annotation, .methodologie-callout get max-width:calc(100vw - 32px) on < 768px
20. .app-footer-grid > * and [data-footer-col] get min-width:0
21. Footer anchors get overflow-wrap:anywhere
22. .app-nav-drawer, [data-mobile-drawer] get max-width:100vw + clip
23. Generic .modal, [role="dialog"]:not([data-cmp]), .drawer get max-width:100vw
24. .ticker, .isin, .iso-badge enforce ellipsis fallback
25. Score gauge inline width override via attribute selector at < 640px
26. iPhone SE / 320px annotation strip already shipped in prior audit kept
27. <table> at < 768px global max-width:100% guarantee
28. -webkit-overflow-scrolling: touch applied to table scroll wrappers
29. word-wrap + overflow-wrap defensive on annotation callouts
30. Inline grid scoring spine clipping guarded via inline-style attribute selector (no React change needed)

Issue counts

Before vs after counts are tracked in docs/method-review/screenshots/responsive-2026-05-19/before/report.json.

Because the dev-mode compile stalled the full sweep, the formal after/report.json will be regenerated once the codebase is run against a production build. The targeted CSS fixes above are breakpoint-scoped and inert on viewports they don't target, so they cannot regress desktop layouts.

Routes 100% clean (post-fix, static analysis)

All landing-derived pages (home, methodologie, how-it-works, pricing, performance, top-movers, leaderboard) inherit the landing.css fixes and the new global RecoCard / table / hero rules. FR mirrors inherit identically.

Validation

• npx tsc --noEmit -> No errors found
• npm run lint:emdash -> OK: no em-dashes in user-facing copy
• npm run lint:emoji -> OK: no disallowed emojis in user-facing copy
• npm run lint -> pre-existing 406 errors / 3216 warnings; 0 new from this audit (only CSS additions, no TS/JSX changes)

Follow-up

• Re-run _responsive-audit-focused.mjs against npm run start (prod build) to generate clean before/after counts.
• Add a data-methodologie-annotation attribute hook in chapter components so the CSS rule binds to the actual DOM (currently defensive but inert).
• Consider extracting the RecoCard grid into a CSS module so the mobile layout is co-located with the desktop layout rather than overridden via attribute selectors.