fix(mobile): pad ContestsScreen bottom so the last card clears the tab bar#14293
Closed
dylanjeffers wants to merge 2 commits into
Closed
fix(mobile): pad ContestsScreen bottom so the last card clears the tab bar#14293dylanjeffers wants to merge 2 commits into
dylanjeffers wants to merge 2 commits into
Conversation
Instruments three key contest interactions following the existing
'Remix Contest:' event prefix and {remixContestId, trackId} property
shape used by the host/pick-winners events:
- REMIX_CONTEST_VIEW: contest page/screen first resolves trackId+eventId
- REMIX_CONTEST_ENTER: user taps Enter Contest / Upload Remix
- REMIX_CONTEST_VIEW_SUBMISSIONS: user opens the submissions tab
Mobile submissions-tab firing uses useFocusedTab from
react-native-collapsible-tab-view because the contest tabs mount
eagerly (lazy: false) — a plain mount effect would fire even for
users who only view the Details tab.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…b bar The shared <ScrollView> only auto-appends a <PlayBarChin /> for the now-playing bar; it leaves the screen's bottom flush with the bottom tab bar and iOS home-indicator safe area. ContestsScreen relied on a 16px mv='l' margin which isn't enough to clear ~75px of system chrome, so the last contest card got hidden behind the tab bar. Add `paddingBottom: spacing(30)` to the ScrollView's contentContainerStyle, matching the convention used in NotificationList. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Contributor
Author
|
Misdiagnosed — the issue is pagination, not bottom padding. Reopening as a separate PR with the correct fix (wire up |
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
1 participant
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
ContestsScreengot cut off at the bottom — users couldn't see/scroll to the last card because it sat behind the bottom tab bar and the iOS home-indicator safe area.<ScrollView>only auto-appends a<PlayBarChin />, which expands toPLAY_BAR_HEIGHTonly when a track is playing (else 0). It does not account forBOTTOM_BAR_HEIGHT(41px) orinsets.bottom(~34px on devices with a home indicator).ContestsScreenis pushed onto a stack inside the bottom-tab navigator (AppTabScreen.tsx:272), so the tab bar stays mounted underneath. The screen relied on<Flex mv='l'>(~16px) for bottom spacing, which isn't enough.ContestsPage) isn't affected because desktop browsers have no system chrome at the bottom and the<Page>wrapper handles its own bottom clearance.Fix
Add
contentContainerStyle={{ paddingBottom: spacing(30) }}(~120px) to the ScrollView. This matches the convention already used inNotificationList.tsx:27-29, and stacks withPlayBarChinso the last card clears both the play bar (when playing) and the bottom tab bar + safe area.Test plan
mv='l'is unchanged so visual top alignment is identical🤖 Generated with Claude Code