chore(runway): cherry-pick fix: [Explore] predict text overflows from card cp-7.63.0 (#25190)

- fix: [Explore] predict text overflows from card cp-7.63.0 (#25170)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Issue: Predict text overflows from card when used on explore and the
user has a bigger text size set in their device.
Solution: Added ellipsis when needed

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: fix predict text overflows from card in explore page

## **Related issues**

Fixes:

https://consensyssoftware.atlassian.net/jira/software/c/projects/ASSETS/boards/1567?assignee=712020%3A2d07ba60-e2fc-4bce-b062-89ffccf46204&assignee=unassigned&selectedIssue=ASSETS-2544

## **Manual testing steps**

```gherkin
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**

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

### **Before**
<img width="591" height="1280" alt="image"

src="https://github.com/user-attachments/assets/d367b388-1380-466f-b7cf-2af6c815f521"
/>

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

### **After**

<img width="420" height="861" alt="image"

src="https://github.com/user-attachments/assets/cb6eeaa8-2850-458b-9a05-2b790e05ce52"
/>



https://github.com/user-attachments/assets/037f4df2-f083-4434-a5f4-81c1212bf4d3

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

## **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]
> Prevents overflow of footer text in `PredictMarketMultiple` by
enforcing single-line truncation and flexible layout.
> 
> - Adds `numberOfLines={1}` and Tailwind styles (`flex-shrink`,
`min-w-0`, `flex-shrink-0`, `ml-2`) to extra outcomes count, total
volume, and recurrence label/icon to enable ellipsis and avoid
wrapping/overlap
> - Minor spacing tweak in the footer container to accommodate
truncation without layout breakage
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c30fbc4. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[64241ce](64241ce)

Co-authored-by: Juanmi <95381763+juanmigdr@users.noreply.github.com>

Author: runway-github[bot]

app/components/UI/Predict/components/PredictMarketMultiple/PredictMarketMultiple.tsx

@@ -295,7 +295,12 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
           justifyContent={BoxJustifyContent.Between}
           twClassName={isCarousel ? '' : 'mt-3'}
         >
-          <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
+          <Text
+            variant={TextVariant.BodySm}
+            color={TextColor.TextAlternative}
+            numberOfLines={1}
+            style={tw.style('flex-shrink min-w-0')}
+          >
             {filteredOutcomes.length > 3
               ? `+${filteredOutcomes.length - 3} ${
                   filteredOutcomes.length - 3 === 1
@@ -307,28 +312,33 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
           <Box
             flexDirection={BoxFlexDirection.Row}
             alignItems={BoxAlignItems.Center}
-            twClassName="gap-4"
+            twClassName="gap-4 flex-shrink min-w-0 ml-2"
           >
             <Text
               variant={TextVariant.BodySm}
               color={TextColor.TextAlternative}
+              numberOfLines={1}
+              style={tw.style('flex-shrink min-w-0')}
             >
               ${totalVolumeDisplay} {strings('predict.volume_abbreviated')}
             </Text>
             {market.recurrence && market.recurrence !== Recurrence.NONE && (
               <Box
                 flexDirection={BoxFlexDirection.Row}
                 alignItems={BoxAlignItems.Center}
+                twClassName="flex-shrink min-w-0"
               >
                 <Icon
                   name={IconName.Refresh}
                   size={IconSize.Md}
                   color={IconColor.Alternative}
-                  style={tw.style('mr-1')}
+                  style={tw.style('mr-1 flex-shrink-0')}
                 />
                 <Text
                   variant={TextVariant.BodySm}
                   color={TextColor.TextAlternative}
+                  numberOfLines={1}
+                  style={tw.style('flex-shrink min-w-0')}
                 >
                   {strings(
                     `predict.recurrence.${market.recurrence.toLowerCase()}`,