feat(detail): sticky minimized market header (binary + multi-outcome) - #108
Merged
Conversation
dmnyc
force-pushed
the
feat/sticky-market-header
branch
2 times, most recently
from
April 27, 2026 21:08
b868669 to
1a05de4
Compare
dmnyc
force-pushed
the
feat/sticky-market-header
branch
from
April 27, 2026 21:13
1a05de4 to
d8aef8e
Compare
dmnyc
marked this pull request as draft
April 27, 2026 21:36
When the user scrolls into the comments section the full-size title is offscreen and the "what am I commenting on" context is lost. Two new components keep that context visible: - \`StickyMarketHeader\` (binary) — back arrow + truncated title + Yes / No percentage pills. - \`StickyGroupHeader\` (multi-outcome) — back arrow + truncated group title + selected-outcome pill (color-tied to the group's palette index, matches the chart legend / outcome list / trading panel header) + a +N badge for the remaining outcomes. Both share identical implementation: - \`position: fixed\` driven by \`useIsInView\` on the H1 wrapper and \`useElementRect\` (ResizeObserver) on the left grid column. The bar mounts only when the title intrudes into the top of the viewport; \`left\` and \`width\` track the column so the bar never bleeds across the right-column trading panel. - Earlier mount trigger: IntersectionObserver \`rootMargin\` of \`-80px 0 0 0\` so the H1 is treated as out of view as soon as it enters the bar's reserved area at the top — covers the macOS 32px strip + bar height — instead of waiting until it's fully past. - Banner overhangs the column by 16px on each side (half of the 32px column gutter, so the right edge lands at the gutter midpoint without crowding the trading panel column). Inner horizontal padding compensates so the back arrow / title / pills sit at the same x-coords as the column edges; only the chrome reaches out further. - New \`.sticky-overlay-safe-top\` utility pins the bar at \`top: 0\` and on macOS adds enough top padding to clear the 32px traffic-light / overlay strip, so the bar's translucent background fills the entire top of the frame instead of leaving the macOS strip transparent. Padding is owned entirely by the class to avoid a shorthand-vs-longhand cascade fight with Tailwind's \`py-*\`. - Background \`bg-slate-950/65\` + \`backdrop-blur\` matches the rest of the app's sticky chrome (TopShell, settings drawer). Also fixes a few UK spellings in nearby comments now that we're standardizing on US English (\`colour\` → \`color\`, \`minimised\` → \`minimized\`).
dmnyc
force-pushed
the
feat/sticky-market-header
branch
from
April 27, 2026 22:26
d8aef8e to
d9fe6b6
Compare
dmnyc
marked this pull request as ready for review
April 27, 2026 22:26
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
When you scroll into the comments section, the full-size market title is offscreen and you lose track of which market you're commenting on. Two parallel sticky-header components keep that context visible — one for binary markets, one for multi-outcome groups.
Components
Both share identical chrome and positioning rules.
Implementation
Also fixes a handful of UK spellings (`colour` → `color`, `minimised` → `minimized`) in nearby comments now that we're standardizing on US English.
Test plan