chore: spacing fix in Whats happening carousel card (#30186)

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

Fixes the spacing in the Whats happening carousel card.

Before:
<img width="300" height="146" alt="Screenshot 2026-05-14 at 14 58 30"
src="https://github.com/user-attachments/assets/6ccd762c-e8e4-4dfe-88be-e5ed9e55d3b7"
/>

After:
<img width="297" height="141" alt="Screenshot 2026-05-14 at 14 57 57"
src="https://github.com/user-attachments/assets/2ba0855a-f055-4b48-b450-a9d16eee98d4"
/>


## **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-only change that standardizes carousel card/skeleton
heights; no business logic, data, or security behavior is modified.
> 
> **Overview**
> Adjusts the `WhatsHappening` carousel to use a shared Tailwind height
class (`h-[230px]`) so real cards, loading skeletons, and the
`ViewMoreCard` stay visually aligned.
> 
> Adds an optional `twHeightClassName` prop to `WhatsHappeningCard` and
`WhatsHappeningCardSkeleton`, wires it through from
`WhatsHappeningSection`, and includes a small unit test for the skeleton
component.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
a03dda5. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: zone-live

app/components/UI/WhatsHappening/WhatsHappeningSection.tsx

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

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

@@ -32,6 +32,8 @@ 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;
@@ -41,6 +43,7 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
   cardIndex,
   source,
   onPress,
+  twHeightClassName = '',
 }) => {
   const tw = useTailwind();
   const formattedDate = useMemo(
@@ -90,7 +93,7 @@ const WhatsHappeningCard: React.FC<WhatsHappeningCardProps> = ({
         onPress={handlePress}
         activeOpacity={0.7}
         style={tw.style(
-          'w-[280px] h-[254px] rounded-2xl bg-background-muted overflow-hidden p-4 justify-between gap-3',
+          `w-[280px] ${twHeightClassName} rounded-2xl bg-background-muted overflow-hidden p-4 justify-between gap-3`,
         )}
       >
         <Box gap={3}>

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { screen } from '@testing-library/react-native';
+import renderWithProvider from '../../../../util/test/renderWithProvider';
+import WhatsHappeningCardSkeleton from './WhatsHappeningCardSkeleton';
+
+jest.mock('./whatsHappeningSkeletonShared', () => ({
+  WhatsHappeningSkeletonShimmer: ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) => children,
+  WhatsHappeningSkeletonLineStack: () => null,
+}));
+
+describe('WhatsHappeningCardSkeleton', () => {
+  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 correctly without twHeightClassName (default empty string)', () => {
+    const { toJSON: withoutProp } = renderWithProvider(
+      <WhatsHappeningCardSkeleton />,
+    );
+    const { toJSON: withEmptyProp } = renderWithProvider(
+      <WhatsHappeningCardSkeleton twHeightClassName="" />,
+    );
+    expect(withoutProp()).toEqual(withEmptyProp());
+  });
+});

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

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