Description

Users who set their system font size to maximum scale experience button text clipping on the Onboarding and OnboardingSheet screens. The design system ButtonPrimary and ButtonSecondary both hardcode numberOfLines: 1 with ellipsizeMode: 'clip', and ButtonBase uses a fixed height (h-12 for Lg, h-10 for Md). This means longer strings like "Import using Secret Recovery Phrase" and "I have an existing wallet" get cut off instead of wrapping.

This fix overrides the button containers to use min-h h-auto py-3 and sets numberOfLines: 0 so buttons expand to fit their content at any font scale.

Depends on #26673 being merged first — this branch is based on refactor/onboarding-tailwind-migration-part1.

Screens fixed

Root cause

Two constraints in @metamask/design-system-react-native:

1. ButtonPrimary and ButtonSecondary both pass numberOfLines: 1, ellipsizeMode: 'clip' to ButtonBase text props
2. ButtonBase applies a fixed height class (h-12 for Lg, h-10 for Md) via TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION

Both are overridable from the consumer side via textProps and twClassName.

Changelog

CHANGELOG entry: null

Related issues

Depends on: #26673

Manual testing steps

Feature: Onboarding button text wrapping at max font scale

  Scenario: user views onboarding with system font set to maximum
    Given app is freshly installed
    And user's system font size is set to largest/maximum

    When user reaches the onboarding screen
    Then "Create a new wallet" and "I have an existing wallet" buttons display full text without clipping

  Scenario: user views onboarding sheet with large font
    Given user taps "Create a new wallet" or "I already have a wallet"

    When the onboarding sheet appears
    Then the "Import using Secret Recovery Phrase" button text wraps to multiple lines instead of being clipped

Screenshots/Recordings

Before

Button text is clipped to one line on devices with max font scale:

After

Buttons expand to fit the full text:

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.