style: fix notification setting padding styles

[Prithpal-Sooriya]

Description

Update NotificationSettings container padding and line margin to align with app spacing consistency.

Changelog

CHANGELOG entry: style: update notification setting container padding

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-373 https://consensyssoftware.atlassian.net/browse/ASSETS-2120

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

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.

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

Tightens NotificationsSettings horizontal padding to 16 and updates divider margin; refreshes snapshot accordingly.

• Styles (NotificationsSettings):
  • Change container from padding: 24 to paddingLeft/Right: 16 and keep paddingBottom: 48.
  • Update line marginHorizontal from -24 to -16.
• Tests:
  • Update snapshot to reflect new horizontal padding values.

^{Written by Cursor Bugbot for commit 6460ac1. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[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.

[Prithpal-Sooriya]

@cursor check failing unit tests. Update test snapshots.

[cursor]

Done! I've updated the failing test snapshot. Here's a summary of the changes:

Changes Made

File Updated: app/components/Views/Settings/NotificationsSettings/__snapshots__/index.test.tsx.snap

The snapshot was updated to reflect the new container padding values:

<RCTScrollView
  style={
    {
      "paddingBottom": 48,
      "paddingLeft": 16,
      "paddingRight": 16,
    }
  }
>

Commit: 74b2644246 - "test: update NotificationsSettings snapshot for new padding"

The test now passes locally and the changes have been pushed to the branch. The CI should re-run and the unit tests should pass now.

---

 

_{Learn more about Cursor Agents}

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.79%. Comparing base (71b1e6e) to head (74b2644).
⚠️ Report is 17 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main   #23934       +/-   ##
===========================================
- Coverage   78.89%   68.79%   -10.10%     
===========================================
  Files        4050     4055        +5     
  Lines      106202   106459      +257     
  Branches    21458    21522       +64     
===========================================
- Hits        83789    73241    -10548     
- Misses      16536    27833    +11297     
+ Partials     5877     5385      -492     

☔ 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]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeNotifications
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

The changes are purely cosmetic CSS styling modifications to the NotificationsSettings component:

1. Container padding changed from padding: 24 to paddingLeft: 16 and paddingRight: 16
2. Line marginHorizontal changed from -24 to -16
3. Snapshot test was updated to match the new styles

These changes:

• Are visual/layout only with no functional impact
• Don't modify any component logic, state management, or behavior
• Don't affect any element IDs or selectors used by E2E tests
• Were accompanied by the appropriate snapshot test update

While the risk is low, running SmokeNotifications is appropriate to verify that the notification settings UI still renders correctly and is functional after these visual changes. The E2E tests interact with elements by IDs (not positions), so they should pass regardless of padding changes, but it's good practice to verify notification-related flows still work.

View GitHub Actions results

[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