feat(giveback): show gift entry on mobile#6321
Merged
Merged
Conversation
The giveback gift entry was gated to laptop-and-up while the mobile placement was parked. Scope the viewport gate to the rail variant only so the header variant renders on mobile too, where it becomes the sole giveback entry point. The invite popover already caps its width to the viewport, so no positioning change is needed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
The mobile feed header renders MobileFeedActions, not HeaderButtons, so lifting the viewport gate alone left the gift entry with no mount point on mobile. Place it next to the Quests button in MobileFeedActions, mirroring its position in the desktop header. It self-gates on featureGiveback, so it only shows where giveback is enabled. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
On the mobile feed header the gift used the desktop Float style (a filled box) and its invite prompt anchored to the mid-header button, so the wide card overflowed the left edge. Add a compact mode threaded from the entry: the button renders flat (Tertiary, Small, size-8) to match the adjacent compact quest button, and the prompt pins to the viewport (centered, below the header) instead of anchoring to the gift. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
Member
|
CI is failing and also on mobile there's horizontal scroll now. have a look |
… explicit compact - Prompt no longer uses a hardcoded top-16; the dock measures the gift's viewport position on open and pins the prompt just below it, with a safe-area-aware fallback. Robust to banners, safe-area insets and header height changes. - Add the entry to the tablet feed header (FeedNav), JS-gated to the tablet range so it never double-mounts with the phone (MobileFeedActions) or desktop (header/rail) instances; widen the tab action reserve so the gift and bell don't overlap the last tab. - Make `compact` an explicit prop set by the mobile placements instead of inferring it from viewport inside the shared entry, so styling follows the placement and never mismatches its neighbours. - Refresh the mount-point comment to include the mobile surfaces. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
Reorder the invite prompt positioning classes to satisfy tailwindcss/classnames-order, which failed lint_shared under --max-warnings 0. No behavior change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
The donut stacked centered on mobile while the heading and legend are left-aligned, so it looked disconnected. Left-align the stacked layout on mobile and keep vertical centering for the tablet+ row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
body sets overflow-x: hidden, but iOS Safari still scrolls the viewport horizontally when a descendant overflows. Add overflow-x: clip on html, which stops it without creating a scroll container so position: sticky (feed nav) keeps working - overflow-x: hidden here would break sticky. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
Member
Author
|
Both addressed 👇
Also left-aligned the "Where the money will go" donut on mobile. Couldn't repro iOS in my env, so a quick look on the preview on an actual phone would be appreciated. Generated by Claude Code |
idoshamun
reviewed
Jul 15, 2026
| viewport scroll horizontally when a descendant overflows. `clip` on the root | ||
| stops that without creating a scroll container, so `position: sticky` (feed | ||
| nav, headers) keeps working - which `overflow-x: hidden` here would break. */ | ||
| html { |
Member
There was a problem hiding this comment.
This is a very bad idea. The right fix is to fix the design, not this hack
Revert the global `overflow-x: clip` on html (per review - it masked the overflow rather than fixing it). The real cause was the mobile feed header: with the added gift button its controls totalled ~378px, which overflows a 375px iPhone (+3) and a 360px Android (+18), so the page scrolled horizontally. Remove the now-redundant vertical divider and tighten the action gap (gap-2 -> gap-1), bringing the row to ~349px so it fits modern phones with margin. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
Member
Author
|
You're right — reverted the global Traced the real source: the mobile feed header ( Separately: the current Would appreciate a glance on the preview on a real phone. Generated by Claude Code |
Address self-review nits:
- HeaderButtons passes compact={!isLaptop} so the gift is styled by the
viewport it renders in, not just the desktop Float, wherever the header
mounts below laptop.
- Measure the compact prompt position in useLayoutEffect (before paint) so
it never repositions on screen. The dock only mounts client-side (the
entry returns null until auth resolves), so it never runs on the server.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PyFAGnkUMvAuvyRDCgtAh5
idoshamun
approved these changes
Jul 15, 2026
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
3 participants
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.
Changes
Surfaces the Giveback gift entry on mobile. It was previously desktop-only, with the mobile placement parked for a follow-up.
GivebackGiftEntryso theheadervariant renders below laptop (therailvariant stays desktop-only).GivebackGiftEntryinMobileFeedActions, next to the Quests button — mirroring its position in the desktop header (the mobile feed header rendersMobileFeedActions, notHeaderButtons, so lifting the gate alone left it with no mount point on mobile).Gated on the same
featureGiveback(giveback) flag as the desktop header and sidebar rail, so all surfaces turn on together.Events
No new tracking events. Reuses the existing
ClickGivebackGiftEntryevent.Experiment
No new experiment. Reuses the existing
givebackflag.Manual Testing
Did you test the modified components media queries?
🤖 Generated with Claude Code
Preview domain
https://claude-give-back-button-mobile-e.preview.app.daily.dev