fix: Reorged whatshappeningsection to prevent shift on bottomsheet opening

[brianacnguyen]

Description

On Perps home, tapping the AI Generated info icon next to What's Happening briefly pushed the Watchlist section downward. The AI disclaimer bottom sheet was mounted as a sibling inside the section Box that uses gap: 12, so opening it inserted an extra flex child and added layout space above Watchlist.

This PR mounts MarketInsightsDisclaimerBottomSheet outside the gapped section content (for both Perps and Explore paths), matching how other screens render this sheet at the root level so the Modal host no longer participates in section layout.

What changed:

• WhatsHappeningSection renders the AI disclaimer sheet as a sibling of the section content Box, not inside it

Changelog

CHANGELOG entry: Fixed What's Happening AI disclaimer opening causing the Watchlist section to shift down on Perps home

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-1046?atlOrigin=eyJpIjoiMzgzNGNlNWJlNGM5NDdiOGJkZGMxNjFjZmU0YzVmODUiLCJwIjoiamlyYS1zbGFjay1pbnQifQ

Manual testing steps

Feature: What's Happening AI disclaimer layout

  Scenario: user opens AI disclaimer on Perps home
    Given the Whats Happening feature flag is enabled
    And Perps home shows What's Happening cards above Watchlist

    When user taps the info icon next to "AI Generated"
    Then the AI generated content bottom sheet opens
    And Watchlist does not shift downward relative to the news cards
    And dismissing the sheet leaves the section layout unchanged

1. Open Perps home with What's Happening visible above Watchlist.
2. Note the spacing between the news carousel and Watchlist.
3. Tap the info icon next to "AI Generated".
4. Confirm the disclaimer sheet opens and Watchlist does not jump down.
5. Dismiss via Got it / close and confirm layout stays stable.
6. Optional unit check: yarn jest app/components/UI/WhatsHappening/WhatsHappeningSection.test.tsx

Screenshots/Recordings

Before

ScreenRecording_07-31-2026.11-07-30_1.MP4

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-08-10.at.17.24.26.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Low Risk
Localized layout/structure change in one UI component with no auth, data, or business-logic impact.

Overview
Fixes a layout jump on Perps home when users tap the AI Generated info icon: Watchlist no longer shifts down while the disclaimer opens.

WhatsHappeningSection now renders MarketInsightsDisclaimerBottomSheet as a sibling of the section content Box, not inside it. On the Perps path that Box uses gap: 12, so mounting the sheet inside it added an extra flex child and extra space above Watchlist when visible. Explore and Perps both return a fragment: gapped Box (header + carousel) plus the sheet outside, consistent with other screens that host this modal at the root.

^{Reviewed by Cursor Bugbot for commit 674f851. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 85.14%. Comparing base (cbe5e23) to head (e8ab110).
⚠️ Report is 41 commits behind head on main.

Files with missing lines	Patch %	Lines
...onents/UI/WhatsHappening/WhatsHappeningSection.tsx	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #34579      +/-   ##
==========================================
+ Coverage   85.12%   85.14%   +0.01%     
==========================================
  Files        6350     6390      +40     
  Lines      173080   174053     +973     
  Branches    42804    43146     +342     
==========================================
+ Hits       147333   148195     +862     
- Misses      15708    15736      +28     
- Partials    10039    10122      +83     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeWalletPlatform, SmokePerps
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 72%

click to see 🤖 AI reasoning details

E2E Test Selection:
The change is a structural refactoring of WhatsHappeningSection.tsx that moves the MarketInsightsDisclaimerBottomSheet (AI disclaimer) outside of the Box wrapper in both the isExploreSection and default render paths. This is not a cosmetic change — it modifies the component tree structure which could affect rendering behavior (e.g., modal stacking, z-index, layout).

WhatsHappeningSection is used in:

1. TrendingView/tabs/NowTab.tsx — part of the Trending tab → SmokeWalletPlatform
2. Perps/Views/PerpsHomeView/PerpsHomeView.tsx — part of the Perps home view → SmokePerps

Per SmokePerps description: "also select SmokeWalletPlatform (Trending section)" — both tags are required together.

No text/label changes that would break E2E selectors. No logic changes. The risk is low but the structural change warrants validation of the affected UI areas.

Performance Test Selection:
The change is a structural UI refactoring of the WhatsHappeningSection component — moving a bottom sheet outside a Box wrapper. This does not affect app launch, login, onboarding, swap execution, account list rendering, or asset loading performance. No performance-sensitive code paths are modified.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud