fix: border width disappearing when using border radius in bottom sheet

[vinnyhoward]

Description

Problem

The BottomSheetDialog component had visual artifacts at corners where borders didn't properly follow the rounded corners, a known React Native rendering issue when borderRadius and borderWidth are applied to the same container.

Solution

Implemented a two-layer rendering approach:

1. Outer layer (sheet): Handles border and border radius only
2. Inner layer (innerSheetContainer): Handles content, padding,
   sizing, and shadows

Both layers use matching 24px border radius and overflow: 'hidden' to ensure perfect alignment and proper clipping.

Changes

• BottomSheetDialog.styles.ts: Split sheet styles into two layers
• BottomSheetDialog.tsx: Wrapped content in new innerSheetContainer View

Why This Works

Separating border properties from layout properties allows React Native to render each layer independently, preventing the conflicts that cause corner artifacts. This is a standard pattern for resolving React Native border radius issues.

Changelog

CHANGELOG entry:null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUL-1078

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

~

Before

Android remains unaffected by this bug

After

Android remains unaffected by these changes

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.

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

Refactors BottomSheetDialog to use an outer border layer and inner content container to resolve border radius artifacts, updating affected snapshots and minor docs/tests formatting.

• UI / BottomSheet:
  • Refactor BottomSheetDialog to two-layer structure (outer sheet for border/borderRadius; inner container for content, padding, sizing, shadows) to fix rounded border rendering.
• Snapshots:
  • Update snapshots across modals/sheets (e.g., Ramp, State/Token selectors, Unsupported region/state, Account/Network selectors, etc.) reflecting new container hierarchy/styles.
• Tests/Tooling:
  • Minor test cleanup (whitespace/logs) and performance test formatting.
• Docs:
  • Small formatting/typo fixes in migration documentation.

^{Written by Cursor Bugbot for commit 1e9f03c. This will update automatically on new commits. 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.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[brianacnguyen]

DS changes look good

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity in the last 90 days. It will be closed in 7 days. Thank you for your contributions.