fix: resolve iOS header overlap in SimpleWebview by grvgoel81 · Pull Request #29020 · MetaMask/metamask-mobile

grvgoel81 · 2026-04-20T07:24:05Z

Description

Fixed an iOS-only bug where the header and web content overlapped in the in-app web view screen.
Jira: https://consensyssoftware.atlassian.net/browse/TO-697

Changelog

CHANGELOG entry: Fixed an iOS-only bug where the header and web content overlapped in the in-app web view screen

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TO-697

Manual testing steps

Feature: SimpleWebview in-app browser

   Scenario: user opens a help article from within the app on iOS
    Given the user is on any screen that links to a support or help article
      
    When user taps the link to open the in-app web view
    Then the web view screen opens with a compact header at the top
    And the header displays the page title and a back arrow
    And the web content renders below the header without any overlap
    And there is no grey dead zone or extra whitespace above the header
    And the home indicator area at the bottom is correctly padded

Screenshots/Recordings

Before

After

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
UI/navigation presentation change scoped to the in-app webview plus test updates; minimal impact outside SimpleWebview, with the main risk being unintended header visibility/styling regressions in that flow.

Overview
Fixes SimpleWebview layout so the header no longer overlaps the web content by rendering HeaderCompactStandard inside the screen (instead of configuring a navigation header) and constraining safe-area padding to the bottom while applying the themed background.

Updates the webview stack navigators (App.tsx and MainNavigator.js) to hide the default stack header (and set cardStyle background), and refreshes the SimpleWebview unit tests/snapshot to mock the new header component and assert goBack/share behavior via HeaderCompactStandard props.

^{Reviewed by Cursor Bugbot for commit c27d504. Configure here.}

github-actions · 2026-04-20T07:24:16Z

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.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit c27d504. Configure here.}

ieow · 2026-04-20T10:30:28Z

Just need 5 lines changes

can you try this?

*removal SafeView might need to check with @Cal-L

codecov-commenter · 2026-04-20T11:33:56Z

Codecov Report

❌ Patch coverage is 88.88889% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 82.20%. Comparing base (88bb30c) to head (5b8305a).
⚠️ Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
app/components/Nav/App/App.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #29020      +/-   ##
==========================================
- Coverage   82.26%   82.20%   -0.07%     
==========================================
  Files        5055     5055              
  Lines      133121   133242     +121     
  Branches    29795    29831      +36     
==========================================
+ Hits       109518   109527       +9     
- Misses      16173    16282     +109     
- Partials     7430     7433       +3

☔ View full report in Codecov by Sentry.
📢 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 · 2026-04-21T05:17:14Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes to SimpleWebview/index.tsx are UI/layout modifications to a shared webview component used across many features:

Removed SafeAreaView wrapper - The WebView now renders directly without the safe area context wrapper. This could cause layout issues on devices with notches/home indicators, particularly on iOS.
Platform-specific includesTopInset - Changed from always true to Device.isAndroid(), meaning iOS no longer gets the top inset. This is a behavioral change that could affect header rendering on iOS.
Added twClassName: 'bg-default rounded-t-2xl' - Visual styling change to the header.
Changed containerStyle - From baseStyles.webview to baseStyles.flexGrow.
Spread navigation options - setOptions({...getHeaderCompactStandardNavbarOptions(...)}) instead of passing directly.

Affected features via SimpleWebview usage:

SmokeRamps: Ramp modals (ProcessingInfoModal, SettingsModal, ErrorDetailsModal, OrderContent) all navigate to SimpleWebview as fallback
SmokePerps: PerpsTransactionsView components navigate to SimpleWebview for transaction details; also requires SmokeWalletPlatform (Trending section) and SmokeConfirmations per tag dependencies
SmokeWalletPlatform: TransactionElement/TransactionDetails navigates to SimpleWebview for transaction history
SmokeConfirmations: Required as dependency of SmokePerps

The changes are well-covered by updated unit tests and snapshots. The risk is medium since these are visual/layout changes to a shared component, not core logic changes. No performance impact expected.

Performance Test Selection:
The changes are UI layout modifications to SimpleWebview (removing SafeAreaView, adjusting header insets, styling). These are not performance-sensitive changes - they don't affect rendering lists, data loading, state management, or critical user flows that are measured by performance tests. No performance tests are needed.

View GitHub Actions results

sonarqubecloud · 2026-04-21T05:35:43Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

tylerc-consensys

LGTM!

github-actions · 2026-04-21T05:44:28Z

✅ E2E Fixture Validation — Schema is up to date
12 value mismatches detected (expected — fixture represents an existing user).
View details

fix: resolve iOS header overlap in SimpleWebview

c27d504

grvgoel81 self-assigned this Apr 20, 2026

metamaskbotv2 Bot added the team-onboarding Onboarding team label Apr 20, 2026

github-actions Bot added the size-M label Apr 20, 2026

cursor Bot reviewed Apr 20, 2026

View reviewed changes

Comment thread app/components/Views/SimpleWebview/index.tsx Outdated

resolve lint issues

9bb2816

grvgoel81 marked this pull request as ready for review April 20, 2026 07:53

add top safe area edge on Android in SimpleWebview

0b5c644

ieow reviewed Apr 20, 2026

View reviewed changes

Comment thread app/components/Views/SimpleWebview/index.tsx Outdated

github-actions Bot added the risk-medium Moderate testing recommended · Possible bug introduction risk label Apr 20, 2026

refactor: simplify SimpleWebview header

64f5f18

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 20, 2026

Merge branch 'main' into fix/simple-webview-ios-header

5b8305a

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 20, 2026

tylerc-consensys reviewed Apr 21, 2026

View reviewed changes

Comment thread app/components/Nav/Main/MainNavigator.js Outdated

Comment thread app/components/Views/SimpleWebview/index.tsx Outdated

address PR comments

4a30b45

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 21, 2026

ieow reviewed Apr 21, 2026

View reviewed changes

Comment thread app/components/Nav/App/App.tsx Outdated

code cleanup

cd0ad4b

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 21, 2026

tylerc-consensys approved these changes Apr 21, 2026

View reviewed changes

grvgoel81 enabled auto-merge April 21, 2026 05:39

grvgoel81 added this pull request to the merge queue Apr 21, 2026

Merged via the queue into main with commit 3185eee Apr 21, 2026
299 of 304 checks passed

grvgoel81 deleted the fix/simple-webview-ios-header branch April 21, 2026 07:31

github-actions Bot locked and limited conversation to collaborators Apr 21, 2026

metamaskbotv2 Bot added the release-7.75.0 Issue or pull request that will be included in release 7.75.0 label Apr 21, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: resolve iOS header overlap in SimpleWebview#29020

fix: resolve iOS header overlap in SimpleWebview#29020
grvgoel81 merged 7 commits into
mainfrom
fix/simple-webview-ios-header

grvgoel81 commented Apr 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Uh oh!

ieow commented Apr 20, 2026 •

edited

Loading

Uh oh!

codecov-commenter commented Apr 20, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 21, 2026

Uh oh!

sonarqubecloud Bot commented Apr 21, 2026

Uh oh!

tylerc-consensys left a comment

Uh oh!

github-actions Bot commented Apr 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

grvgoel81 commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ieow commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-commenter commented Apr 20, 2026

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 21, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Apr 21, 2026

Quality Gate passed

Uh oh!

tylerc-consensys left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

grvgoel81 commented Apr 20, 2026 •

edited

Loading

ieow commented Apr 20, 2026 •

edited

Loading