fix(explorer): widen scroll-affordance breakpoint, standardize hint placement

[joeharris76]

Follow-up to PR #270 (#270 review).

The bb-scroll-affordance media query used max-width: 47.999rem (~767.98px),
which excluded the 768px tablet viewport. Playwright assertions like
"mobile table affordances remain visible at tablet" expected the hint
visible at viewport.width=768; without this fix the assertion only passed
because the upstream serial test failed first and prevented it from running.
Widen to max-width: 48rem inclusive — dense cohort/query tables still
overflow horizontally at 768.

Also standardize hint placement: the Query results table, Query SQL output,
ResultDetail timing/sample tables, and QueryDiff now place the hint OUTSIDE
the .overflow-x-auto container so the cue stays visible when the user
scrolls. Home/MetaLeaderboard/DataTable already followed this pattern.

Capture verification log at _project/verification-logs/results-explorer-pr270-followups/
covering the affordance + document-overflow tests in isolation (the
serial-mode failure on the unrelated 'query workbench... at desktop' test
is pre-existing on develop and out of scope here).

Adds two follow-up TODOs: focus-visible styling for ExplorerNavLink (audit
VH-1 follow-on) and a TableScrollHint helper to converge the 6+ duplicated
affordance copies.

Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com

[joeharris76]

Conflict resolution playbook (vs PR #271)

make pr-conflict-scan flagged textual overlap with #271 (fix/results-explorer-retheme-postmerge-tokenize). I ran a local 3-way merge probe and confirmed:

• results-explorer/src/components/QueryDiffTable.tsx — auto-merges (disjoint hunks: fix(explorer): retokenize result/compare panels reintroduced by PR #268/#269 squash race #271 retokenizes the suppression banner at L46, fix(explorer): widen scroll-affordance breakpoint, standardize hint placement #272 moves the scroll hint at L51-54).
• results-explorer/src/pages/ResultDetail.tsx — auto-merges (disjoint sections: fix(explorer): retokenize result/compare panels reintroduced by PR #268/#269 squash race #271 retokenizes the result summary header, execution-plans card, and ResultMetricCard; fix(explorer): widen scroll-affordance breakpoint, standardize hint placement #272 only touches the Query Timings + Individual samples scroll containers).
• results-explorer/src/index.css — true conflict at the bb-scroll-affordance media query.

Canonical resolution for the index.css conflict

Whichever PR lands second should resolve to:

@media (max-width: 48rem) {
    .bb-scroll-affordance {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
}

Drop #271's "47.999rem = --bb-bp-mobile - 0.001rem … var() and calc() are not supported in @media queries" comment. The comment is misleading: calc() is supported in @media since Chrome 79 / Firefox 66 / Safari 13.1 (~2019); only var() is unsupported. More importantly, the literal value should be 48rem inclusive so the 768px tablet viewport keeps the scroll cue (this is the bug #272 fixes — see responsive.spec.ts:138 "mobile table affordances remain visible at tablet").

Order

#272 has no other claim on index.css. Either order works, but if #271 lands first, #272's rebase will need ~30s of manual conflict resolution per the snippet above.

[joeharris76]

Rebased onto develop (post-#271)

#271 landed at 2026-05-08T01:19:00Z, which flipped #272 to DIRTY. Rebased and resolved per the playbook above:

• Conflict was confined to index.css's bb-scroll-affordance media query block, exactly as predicted.
• Resolution: dropped fix(explorer): retokenize result/compare panels reintroduced by PR #268/#269 squash race #271's "47.999rem = --bb-bp-mobile - 0.001rem … var()/calc() not supported" comment and kept max-width: 48rem. The 768px tablet now keeps the scroll cue, which is what the responsive Playwright assertions expect.
• QueryDiffTable.tsx and ResultDetail.tsx auto-merged cleanly. Re-ran npm run typecheck (clean) and the affordance + document-overflow tests in isolation (4/4 pass at 390 + 768 post-rebase).

Force-pushed via --force-with-lease. Verification log under _project/verification-logs/results-explorer-pr270-followups/ is now stale w.r.t. file paths but the assertion outcomes are unchanged; the in-line e2e re-run on the rebased HEAD is the canonical record.