Skip to content

feat(detail): sticky minimized market header (binary + multi-outcome) - #108

Merged
dmnyc merged 1 commit into
masterfrom
feat/sticky-market-header
Apr 27, 2026
Merged

feat(detail): sticky minimized market header (binary + multi-outcome)#108
dmnyc merged 1 commit into
masterfrom
feat/sticky-market-header

Conversation

@dmnyc

@dmnyc dmnyc commented Apr 27, 2026

Copy link
Copy Markdown
Contributor

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

  • `StickyMarketHeader` (binary `Market`) — back arrow + truncated title + Yes / No percentage pills.
  • `StickyGroupHeader` (multi-outcome `MarketGroup`) — back arrow + truncated group title + leading-outcome pill with its percentage + a `+N` badge for the remaining outcomes.

Both share identical chrome and positioning rules.

Implementation

  • Lives inside the left grid column of each detail page so its width matches the column and the right-column trading / outcome panel stays unobstructed. A small negative right-margin (`lg:-mr-4`) reaches halfway into the 32px column gutter for a slightly less cramped feel.
  • `.sticky-overlay-safe-top` utility — pins 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 (rather than leaving the macOS strip transparent). Padding is owned entirely by the class to avoid a shorthand-vs-longhand cascade fight with Tailwind's `py-*`.
  • Always rendered, not conditional on scroll position. `position: sticky` needs a layout pass to compute its pin point and a freshly-mounted element above an already-scrolled viewport often fails to pin reliably. Keeping the bar in the layout always avoids the flicker / no-show edge case at the cost of a compact duplicate title between the H1 and the chart at the very top of the page.
  • Background is `bg-slate-950/65` + `backdrop-blur` to match the rest of the app's sticky chrome (TopShell, settings drawer).

Also fixes a handful of UK spellings (`colour` → `color`, `minimised` → `minimized`) in nearby comments now that we're standardizing on US English.

Test plan

  • Scroll into comments on the binary detail page — title + Yes/No pills stay pinned at top.
  • Scroll into comments on a multi-outcome group page — title + leading outcome + `+N` stay pinned at top.
  • On macOS, both bars' backgrounds extend up under the traffic lights without the title text falling behind them.
  • Trading / outcome panel in the right column stays fully visible at every scroll position.
  • Mobile / single-column layout — bars still pin correctly without the gutter overhang.
  • biome check, tsc --noEmit pass.

@dmnyc dmnyc changed the title feat(detail): sticky minimised market header feat(detail): sticky minimized market header Apr 27, 2026
@dmnyc
dmnyc force-pushed the feat/sticky-market-header branch 2 times, most recently from b868669 to 1a05de4 Compare April 27, 2026 21:08
@dmnyc dmnyc changed the title feat(detail): sticky minimized market header feat(detail): sticky minimized market header (binary + multi-outcome) Apr 27, 2026
@dmnyc
dmnyc force-pushed the feat/sticky-market-header branch from 1a05de4 to d8aef8e Compare April 27, 2026 21:13
@dmnyc
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
dmnyc force-pushed the feat/sticky-market-header branch from d8aef8e to d9fe6b6 Compare April 27, 2026 22:26
@dmnyc
dmnyc marked this pull request as ready for review April 27, 2026 22:26
@dmnyc
dmnyc merged commit 9c36698 into master Apr 27, 2026
3 checks passed
@dmnyc
dmnyc deleted the feat/sticky-market-header branch April 27, 2026 22:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant