fix(predict): allows long titles to wrap in buy preview header (#28446)

## **Description**

The Predict buy preview screen header did not constrain the title area
width, causing long market titles (e.g. "Tottenham Hotspur FC vs.
Brighton & Hove Albion") to overflow the screen. The outer title `Box`
was missing `flex-1 min-w-0`, so it ignored the parent row's bounds.

Fixed by adding flex constraints to the title container and switching
from single-line truncation to text wrapping for both the market title
and subtitle row, so the full market name is always visible.

## **Changelog**

CHANGELOG entry: Fixed long titles overflowing on the Predict buy
preview header

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-799

## **Manual testing steps**

```gherkin
Feature: Predict buy preview header text wrapping

  Scenario: long market title wraps within the header
    Given the user is on the Predict feed
    And a market with a long title is visible (e.g. "Tottenham Hotspur FC vs. Brighton & Hove Albion")

    When the user taps a buy button to open the buy preview screen
    Then the full market title wraps onto multiple lines within the header
    And the title does not overflow or clip beyond the screen edge
    And the back button remains visible and tappable on the left

  Scenario: subtitle row wraps when content is long
    Given the user opens the buy preview for a market with a long group item title and outcome label

    When the header renders
    Then the subtitle text wraps to a new line if it exceeds the available width
    And the separator dot remains between the group title and outcome label

  Scenario: short market title displays on a single line
    Given the user opens the buy preview for a market with a short title (e.g. "Will BTC hit $100k?")

    When the header renders
    Then the title displays on a single line as before
    And no extra vertical space is added
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

<img width="1206" height="2622" alt="image"
src="https://github.com/user-attachments/assets/75355e7a-b5ba-4901-862e-61c8d44b9e82"
/>

### **After**

<!-- [screenshots/recordings] -->

<img width="790" height="1572" alt="image"
src="https://github.com/user-attachments/assets/53fe7ab4-665f-40de-ae84-671fb31b3abe"
/>


## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI-only layout tweaks in the Predict buy preview header to
prevent text overflow; no business logic or data flow changes.
> 
> **Overview**
> Fixes Predict buy preview header text overflow by constraining the
title row with `flex-1 min-w-0` and allowing the market title/subtitle
content to wrap instead of truncating to a single line.
> 
> Also enables wrapping in the subtitle row via `flex-wrap` so long
group/outcome labels stay within screen bounds while keeping the back
button accessible.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
fe227e7. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ghgoodreau

app/components/UI/Predict/views/PredictBuyWithAnyToken/components/PredictBuyPreviewHeader/PredictBuyPreviewHeader.tsx

@@ -76,29 +76,21 @@ export function PredictBuyPreviewHeaderTitle({
     <Box
       flexDirection={BoxFlexDirection.Row}
       alignItems={BoxAlignItems.Center}
-      twClassName="gap-3"
+      twClassName="flex-1 min-w-0 gap-3"
     >
       <Image
         source={{ uri: outcome.image }}
         style={tw.style('w-10 h-10 rounded')}
       />
       <Box flexDirection={BoxFlexDirection.Column} twClassName="flex-1 min-w-0">
-        <Text
-          variant={TextVariant.HeadingSm}
-          numberOfLines={1}
-          ellipsizeMode="tail"
-        >
-          {market.title}
-        </Text>
-        <Box flexDirection={BoxFlexDirection.Row} twClassName="gap-1">
+        <Text variant={TextVariant.HeadingSm}>{market.title}</Text>
+        <Box flexDirection={BoxFlexDirection.Row} twClassName="gap-1 flex-wrap">
           {!!outcome.groupItemTitle && (
             <>
               <Text
                 variant={TextVariant.BodySm}
                 twClassName="font-medium"
                 color={TextColor.TextAlternative}
-                numberOfLines={1}
-                ellipsizeMode="tail"
               >
                 {outcome.groupItemTitle}
               </Text>
@@ -119,8 +111,6 @@ export function PredictBuyPreviewHeaderTitle({
                 ? TextColor.SuccessDefault
                 : TextColor.ErrorDefault
             }
-            numberOfLines={1}
-            ellipsizeMode="tail"
           >
             {outcomeTokenLabel}
           </Text>