fix: Mobile banner close button dismisses the wrong banner and leaves a ghost element

[reddam-charan-teja-reddy]

What

On mobile, the survey/donation banner (donate_banner.tt.html) and the app-download banner (site_layout.tt.html) share the same screen space. When a user dismisses the survey banner, two problems occur:

1. Ghost close button — the banner is hidden with display: none but its absolutely-positioned close button remains visible and clickable in the DOM, overlapping the app-download banner.
2. Wrong banner dismissed — tapping that ghost "×" fires the survey banner's dismiss handler instead of closing the app-download banner, confusing users.

Root cause: A premature </section> tag in donate_banner.tt.html placed the close button outside its parent section, and display: none on the parent didn't affect it. The app-download banner also had no close button of its own.

Changes:

• donate_banner.tt.html

• site_layout.tt.html

• scss/_off.scss

• Replaces bannerID.style.display = 'none' with bannerID.remove() so dismissed banners are fully removed from the DOM

• Adds a close button with cookie-based persistence to the mobile app-download banner in site_layout.tt.html, with supporting styles in _off.scss

Large Language Models usage disclosure

Used GitHub Copilot (Claude Opus 4.6), for investigating the root cause, and implementing the fix.
All changes were tested locally on http://world.openfoodfacts.localhost/ in mobile view.

Screenshot or video

Before: Not possible to dismiss the banner

After: Both the banners can be dismissed with their respective close button

After closing

Related issue(s) and discussion

• Fixes: Banner close button on mobile dismisses the wrong banner and leaves a ghost element #13269

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud