Skip to content

Bring the full-size logo back on an upward scroll on mobile - #246

Merged
mlaetitia merged 1 commit into
developfrom
fix/T51ENG-2081-mobile-header-shrink-develop
Oct 28, 2026
Merged

mlaetitia merged 1 commit into
developfrom
fix/T51ENG-2081-mobile-header-shrink-develop

Conversation

@mlaetitia

@mlaetitia mlaetitia commented Oct 28, 2026 •

Copy link
Copy Markdown
Collaborator

Related to #

Proposed changes

  • Below 785px the logo shrinks after 120px of scrolling down and returns to full size after 100px back up, anywhere on the page.

Why are these changes being made?

#240 merged the mobile and desktop scroll paths into one absolute threshold. That dropped the behavior production has below 785px, where the full-size logo comes back on any upward scroll instead of only at the top of the page. The partner asked for production's behavior to be kept (T51ENG-2081).

Testing instructions

  • At 536px or any phone width: scroll down past 120px and the logo shrinks. Scroll back up about 100px, stop mid-page, and it returns to full size. https://opensource.org should behave the same.
  • Flick up hard from just below the fold, or tap a back-to-top link: the logo must come back to full size.
  • Above 1200px: unchanged, shrinks once at 40px and restores at the top.
  • Nothing in the header should move position in any state. The menu button in particular stays put.

🤖 Generated with Claude Code

https://claude.ai/code/session_011rCHPCdbV5C5dDJjEmMDuy

#240 merged the mobile and desktop scroll paths into one absolute threshold,
which dropped the behaviour production has below 785px: the full-size logo
returns on any upward scroll rather than only at the top of the page. The
partner asked for production's behaviour to be kept.

Three cases could leave the logo stuck small. The handler runs once per
animation frame, so a single frame can swallow a whole flick, and recording the
turning point where the frame landed rather than at the peak it turned from made
the restore unreachable after a back-to-top jump, a hard flick up from just
below the fold, or iOS overscroll reporting a negative position. It now records
the peak, clamps the position at zero, and clears the peak on the wide path so a
rotation cannot carry a stale one.

matchMedia replaces the innerWidth read, so crossing 784px re-decides instead of
waiting for the next scroll event.

No CSS changed. The bar keeps its height at every width, so the logo row and the
menu button stay where they are.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011rCHPCdbV5C5dDJjEmMDuy
@mlaetitia
mlaetitia merged commit 0c5920b into develop Oct 28, 2026
5 checks passed
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.

1 participant