diff --git a/web/components/back-button.tsx b/web/components/back-button.tsx index 6e8cce11..3c75517b 100644 --- a/web/components/back-button.tsx +++ b/web/components/back-button.tsx @@ -22,7 +22,10 @@ export function BackButton(props: {className?: string}) { type="button" onClick={() => router.back()} className={clsx( - 'text-ink-500 hover:text-primary-700 inline-flex items-center gap-1 text-sm transition-all', + // `-m-2 p-2` is hit area only: on mobile the label is hidden and the button was the 16px + // chevron itself, well under a thumb's worth of target. The negative margin cancels the + // padding, so the chevron stays exactly where every caller already positions it. + 'text-ink-500 hover:text-primary-700 -m-2 inline-flex items-center gap-1 p-2 text-sm transition-all', className, )} > diff --git a/web/components/profile-form-nav.tsx b/web/components/profile-form-nav.tsx index c1943d27..a9a49d34 100644 --- a/web/components/profile-form-nav.tsx +++ b/web/components/profile-form-nav.tsx @@ -134,31 +134,17 @@ export function ProfileFormNav(props: {className?: string}) { * length. The need is greater here than on desktop, since every field stacks and the page runs * roughly three times longer; the answer just has to cost one row instead of a screen. * - * It hides while you scroll down and returns when you scroll up. A permanent bar would spend 44px of - * an already short viewport on something wanted a few times per session, and the bottom edge is - * already taken by the nav bar and the floating Save button. + * It stays pinned for the whole form. It previously hid on scroll down to save 44px of a short + * viewport, but a bar that is only there when you scroll the wrong way reads as gone — you cannot + * see where you are without scrolling backwards first, which is exactly what the index exists to + * avoid. */ export function ProfileFormSectionBar(props: {className?: string}) { const {className} = props const {sections, activeId, activeIndex, goTo} = useFormSections() const [open, setOpen] = useState(false) - const [hidden, setHidden] = useState(false) const t = useT() - useEffect(() => { - let lastY = window.scrollY - const onScroll = () => { - const y = window.scrollY - // The 8px deadband stops momentum jitter from flickering the bar on and off. - if (Math.abs(y - lastY) > 8) { - setHidden(y > lastY && y > 160) - lastY = y - } - } - window.addEventListener('scroll', onScroll, {passive: true}) - return () => window.removeEventListener('scroll', onScroll) - }, []) - if (sections.length === 0) return null const active = sections[activeIndex] @@ -169,8 +155,7 @@ export function ProfileFormSectionBar(props: {className?: string}) { status bar in the Capacitor shell; the variable is 0 in a browser, so one rule covers both. */}