Bugs
Complete

Mobile: "My Events" tab opens profile but doesn't anchor to the events section

## What happens On mobile, the bottom tab bar's **My Events** tab takes you to your public profile page (intended). But it dumps you at the **top** of the profile, leaving you to scroll past Profile, About, organizations, etc. before you reach the events section that you actually meant to open. ## Expected Clicking the tab should land you directly on the events section of your profile — either by scroll-anchoring (`#gathrings`) or by routing to a section-aware URL the page knows how to scroll to. User intent when tapping that tab is unambiguous: "show me my events." Two clicks shouldn't be needed. ## Two fixes in this ticket ### 1. Label (user-facing copy) The tab currently reads **"My Events"**. Per the project's marketing convention, the user-facing label should be **"My Gathrings"** — same as the section heading on the profile page (see screenshot referenced in Fider #101 — section is titled "Gathrings"). Change the i18n key value, not the code identifier. ### 2. Behavior The tab's link should target the events section anchor on the profile page, not just the page root. Implementation options: - **Anchor link** (simplest): `<Link href={`/${username}#gathrings`}>` — give the events section `id="gathrings"` (or equivalent semantic id) and rely on the browser's native scroll-to-anchor. - **Section-aware route param**: `/${username}?section=events` — page reads the param and `scrollIntoView()` after hydration. Slightly nicer because the URL stays clean and back/forward works naturally. Either works. Anchor is the smaller diff. ## Reproduction 1. On a mobile-width viewport (≤ 1024 px) sign in. 2. Tap the **My Events** tab in the bottom tab bar. 3. Observe: lands on `/your-username` (your public profile page) — viewport at the top. 4. Scroll down to find the events section. (That's the bug.) ## Files (estimated) - `src/components/BottomTabBar.tsx` — change the My Events tab's `href` to include the anchor and update the i18n label key. - `src/features/profile/pages/PublicProfilePage.tsx` (or equivalent) — add `id="gathrings"` to the events-section wrapper. - `src/core/i18n/locales/en.json` + `fr.json` — update the tab label string from "My Events" → "My Gathrings" / corresponding French. ## Edge cases to handle - If the events section is empty (no upcoming, no past, no hosting), the anchor still scrolls to it — that's fine; the empty state is informative on its own. - Anchor-scroll on a hydrating page can land mid-paint; if jank shows up, switch to the section-param + `scrollIntoView({behavior:'smooth'})` approach after `useLayoutEffect`. - The desktop nav doesn't have this tab (≥ 1024 px hides the tab bar), so no parallel change needed there. ## Found by Manual testing

0 Comments

Sign in to comment

No comments yet. Be the first to share your thoughts!