chore(runway): cherry-pick chore: align carousel card heights for accessibility cp-7.78.0 (#30233)

- chore: align carousel card heights for accessibility (#30201)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

Use fluid heights on cards so large system text doesn’t clip.

Problem before: fixed heights + large accessibility text scaling =
content clipping inside cards.
Now: cards and skeletons are fully fluid (no height prop needed). Only
ViewMoreCard keeps a height, and only as a min-h directly inline in
WhatsHappeningSection, so it sits at the same height as a typical card
at normal font scale.

How it looks now with huge font:

<img height="800" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-14
at 18 39 46"

src="https://github.com/user-attachments/assets/9097c9eb-c49a-45c4-b998-2392c06676dc"
/>

And normal/default font size:
<img height="800" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-14
at 18 50 02"

src="https://github.com/user-attachments/assets/e4a61f2b-425a-44d4-b650-677f288304e0"
/>


## **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: null

## **Related issues**

Fixes:

## **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**

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

### **After**

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

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

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

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user

SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and

[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance

Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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/layout change to remove fixed card heights; main risk is
minor visual regression in carousel alignment across devices/font
scales.
> 
> **Overview**
> Makes the What’s Happening carousel cards and loading skeletons
**fluid-height** by removing the fixed Tailwind height prop
(`twHeightClassName`) from `WhatsHappeningCard` and
`WhatsHappeningCardSkeleton`, preventing content clipping with large
accessibility text.
> 
> Keeps the “View more” tile visually aligned by switching it to a
`min-h-[230px]` constraint, and updates the skeleton test to assert the
expected 2-line title and 3-line description placeholder configuration.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
00186c9. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Devin Stewart
<49423028+Bigshmow@users.noreply.github.com>
[a55aeb3](a55aeb3)

Co-authored-by: António Regadas <antonio.regadas@consensys.net>
Co-authored-by: Devin Stewart <49423028+Bigshmow@users.noreply.github.com>

Author: 3 people

app/components/UI/WhatsHappening/WhatsHappeningSection.tsx

@@ -37,7 +37,7 @@ import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
 import { getWhatsHappeningEventProps } from './eventProperties';
 
 const CARD_WIDTH = 280;
-const CARD_HEIGHT_CLASS = 'h-[230px]';
+const VIEW_MORE_MIN_HEIGHT_CLASS = 'min-h-[230px]';
 const GAP = 12;
 
 const SNAP_OFFSETS = Array.from(
@@ -163,12 +163,7 @@ const WhatsHappeningSection = forwardRef<
         testID={WhatsHappeningSelectorsIDs.CAROUSEL}
       >
         {isLoading ? (
-          SKELETON_KEYS.map((key) => (
-            <WhatsHappeningCardSkeleton
-              key={key}
-              twHeightClassName={CARD_HEIGHT_CLASS}
-            />
-          ))
+          SKELETON_KEYS.map((key) => <WhatsHappeningCardSkeleton key={key} />)
         ) : (
           <>
             {items.map((item: WhatsHappeningItem, index: number) => (
@@ -178,12 +173,11 @@ const WhatsHappeningSection = forwardRef<
                 cardIndex={index}
                 source={source}
                 onPress={() => handleCardPress(index)}
-                twHeightClassName={CARD_HEIGHT_CLASS}
               />
             ))}
             <ViewMoreCard
               onPress={handleViewAll}
-              twClassName={`w-[180px] ${CARD_HEIGHT_CLASS}`}
+              twClassName={`w-[180px] ${VIEW_MORE_MIN_HEIGHT_CLASS}`}
               textVariant={TextVariant.BodyLg}
             />
           </>

app/components/UI/WhatsHappening/components/WhatsHappeningCard.tsx

@@ -32,8 +32,6 @@ interface WhatsHappeningCardProps {
   cardIndex: number;
   source: WhatsHappeningSourceValue;
   onPress?: (item: WhatsHappeningItem) => void;
-  /** Tailwind height class so the carousel can keep all cards visually aligned. */
-  twHeightClassName?: string;
 }
 
 const MAX_VISIBLE_ASSET_ICONS = 3;
@@ -43,7 +41,6 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
   cardIndex,
   source,
   onPress,
-  twHeightClassName = '',
 }) => {
   const tw = useTailwind();
   const formattedDate = useMemo(
@@ -93,7 +90,7 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
         onPress={handlePress}
         activeOpacity={0.7}
         style={tw.style(
-          `w-[280px] ${twHeightClassName} rounded-2xl bg-background-muted overflow-hidden p-4 justify-between gap-3`,
+          'w-[280px] rounded-2xl bg-background-muted overflow-hidden p-4',
         )}
       >
         <Box gap={3}>
@@ -134,6 +131,7 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
           alignItems={BoxAlignItems.Center}
           justifyContent={BoxJustifyContent.Between}
           gap={2}
+          twClassName="mt-3"
         >
           {assetLabel && (
             <Box

app/components/UI/WhatsHappening/components/WhatsHappeningCardSkeleton.test.tsx

@@ -3,35 +3,36 @@ import { screen } from '@testing-library/react-native';
 import renderWithProvider from '../../../../util/test/renderWithProvider';
 import WhatsHappeningCardSkeleton from './WhatsHappeningCardSkeleton';
 
+const mockLineStack = jest.fn();
+
 jest.mock('./whatsHappeningSkeletonShared', () => ({
   WhatsHappeningSkeletonShimmer: ({
     children,
   }: {
     children: React.ReactNode;
   }) => children,
-  WhatsHappeningSkeletonLineStack: () => null,
+  WhatsHappeningSkeletonLineStack: (props: { lineClassNames: string[] }) => {
+    mockLineStack(props);
+    return null;
+  },
 }));
 
 describe('WhatsHappeningCardSkeleton', () => {
+  beforeEach(() => {
+    mockLineStack.mockClear();
+  });
+
   it('renders without crashing', () => {
     renderWithProvider(<WhatsHappeningCardSkeleton />);
     expect(screen.toJSON()).not.toBeNull();
   });
 
-  it('applies the twHeightClassName when provided', () => {
-    renderWithProvider(
-      <WhatsHappeningCardSkeleton twHeightClassName="h-[230px]" />,
-    );
-    expect(screen.toJSON()).not.toBeNull();
-  });
+  it('renders a two-line title placeholder and a three-line description placeholder', () => {
+    renderWithProvider(<WhatsHappeningCardSkeleton />);
 
-  it('renders correctly without twHeightClassName (default empty string)', () => {
-    const { toJSON: withoutProp } = renderWithProvider(
-      <WhatsHappeningCardSkeleton />,
-    );
-    const { toJSON: withEmptyProp } = renderWithProvider(
-      <WhatsHappeningCardSkeleton twHeightClassName="" />,
-    );
-    expect(withoutProp()).toEqual(withEmptyProp());
+    expect(mockLineStack).toHaveBeenCalledTimes(2);
+    const [titleCall, descriptionCall] = mockLineStack.mock.calls;
+    expect(titleCall[0].lineClassNames).toHaveLength(2);
+    expect(descriptionCall[0].lineClassNames).toHaveLength(3);
   });
 });

app/components/UI/WhatsHappening/components/WhatsHappeningCardSkeleton.tsx

@@ -6,20 +6,13 @@ import {
   WhatsHappeningSkeletonShimmer,
 } from './whatsHappeningSkeletonShared';
 
-interface WhatsHappeningCardSkeletonProps {
-  /** Tailwind height class so skeletons match real cards in the carousel. */
-  twHeightClassName?: string;
-}
-
-const WhatsHappeningCardSkeleton: React.FC<WhatsHappeningCardSkeletonProps> = ({
-  twHeightClassName = '',
-}) => {
+const WhatsHappeningCardSkeleton: React.FC = () => {
   const tw = useTailwind();
 
   return (
     <View
       style={tw.style(
-        `w-[280px] ${twHeightClassName} rounded-2xl bg-background-muted overflow-hidden`,
+        'w-[280px] rounded-2xl bg-background-muted overflow-hidden',
       )}
     >
       <WhatsHappeningSkeletonShimmer>