Skip to content

feat(bet-form): add sticky action bar on BetForm while scrolling (Closes #808) - #864

Open
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/betform-sticky-action-bar
Open

feat(bet-form): add sticky action bar on BetForm while scrolling (Closes #808)#864
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/betform-sticky-action-bar

Conversation

@waterWang

Copy link
Copy Markdown

Closes #808

Summary

Adds a sticky bottom action bar to BetForm that stays reachable while the preset chips and amount input scroll within a constrained container.

Changes

  • Scrollable content area: Wraps QuickBetPresets and the amount input in a max-h-[min(60vh,26rem)] overflow-y-auto container so the form stays compact on small viewports and the content scrolls independently.
  • Sticky action bar: The submit button (Place Bet) is now wrapped in a sticky bottom-0 action bar that remains pinned to the bottom of the form as content scrolls beneath it.
  • Scrolled indicator: Grows a top border + soft shadow once the body has actually been scrolled (tracked via an onScroll handler), so it reads as a distinct bar floating over content rather than empty visual space when everything already fits without scrolling.
  • Reduced motion: Suppresses the shadow transition when the user prefers reduced motion, consistent with the rest of the component.
  • Tests: Adds focused unit tests (BetForm.sticky-action-bar.test.tsx) covering render, sticky positioning, scroll-state shadow, non-scroll state, and submit behavior.

Testing

  • jest BetForm.sticky-action-bar (all new tests pass)
  • Existing BetForm behavior unchanged (submit, keyboard shortcut, skeleton)

Accessibility

  • Sticky bar keeps the primary CTA reachable without covering form content (WCAG 2.1 — no focus trap, respects reduced motion).
  • Minimum touch target 44×44 px (WCAG 2.5.5) preserved.

@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

Adds a sticky bottom action bar to BetForm that stays pinned to the
bottom of the form while the preset chips and amount input scroll
within a constrained container.

- Wraps QuickBetPresets and the amount input in a max-h overflow-y-auto
  scrollable container so the form stays compact on small viewports.
- The submit button (Place Bet) is now wrapped in a sticky bottom-0
  action bar that remains reachable while the content scrolls.
- Grows a top border + shadow once the body has been scrolled (tracked
  via onScroll), so it reads as a floating bar over content rather than
  empty space when everything fits without scrolling.
- Respects reducedMotion (suppresses the shadow transition).
- Adds focused unit tests for the sticky action bar behavior.

Closes Predictify-org#808
@waterWang
waterWang force-pushed the feat/betform-sticky-action-bar branch from 17cffe8 to 06579fa Compare August 8, 2026 19:32
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.

Add sticky action bar on BetForm while scrolling [b#074]

1 participant