fix(rewards): improve VIP splash layout on small screens (#32187)

## **Description**

The VIP splash screen used fixed sizing (38px title, full-size fox
image, tall footer buttons) that felt crowded on compact devices. The
referee splash variant is especially tight because it adds "Referred by"
footer text above the action buttons.

This PR adds a responsive layout for screens shorter than 750px,
following the same breakpoint pattern used in `CardWelcome`:

- Scale the gradient title from 38px to 28px
- Scale the fox hero image down (max 260px wide, preserving aspect
ratio) and reduce its top margin
- Compact the footer with tighter gaps/padding and shorter primary
(`h-10`) and secondary (`h-8`) buttons

`mt-24` and `mt-[18px]` spacing for the title and description are
unchanged.

## **Changelog**

CHANGELOG entry: Fixed VIP splash screen layout on smaller devices

## **Related issues**

Refs: N/A

## **Manual testing steps**

```gherkin
Feature: VIP splash responsive layout

  Scenario: VIP splash renders proportionally on a small device
    Given the app is running on a simulator with screen height below 750px (e.g. iPhone SE)
    And the user navigates to the VIP splash screen

    When the splash screen is displayed
    Then the title uses the smaller 28px font size
    And the fox image is scaled down
    And the footer buttons use the compact heights

  Scenario: VIP referee splash fits with referral footer on a small device
    Given the app is running on a small simulator
    And the user is a VIP referee who has not yet accepted the invite

    When the referee splash screen is displayed
    Then the "Referred by" text, Continue button, and Not now button fit without crowding the title

  Scenario: VIP splash layout is unchanged on large devices
    Given the app is running on a simulator with screen height at or above 750px (e.g. iPhone 15 Pro Max)

    When the VIP splash screen is displayed
    Then the title, fox image, and footer buttons use the original sizing
```

- [x] `yarn jest VipSplashGradientTitle.test.tsx
VipSplashScreenLayout.test.tsx --coverage=false`

## **Screenshots/Recordings**

N/A — layout changes are best verified on small vs. large simulators;
screenshots can be added after manual QA.

### **Before**

N/A

### **After**
iPhone 13 Mini
<img width="1080" height="2340" alt="Simulator Screenshot - iPhone 13
mini - 2026-06-22 at 16 16 03"
src="https://github.com/user-attachments/assets/458c7dd1-a257-40f1-822d-038a3b732e24"
/>

iPhone 14
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2026-06-22 at 16 19 45"
src="https://github.com/user-attachments/assets/9ff4e841-d6c2-4a5d-aa03-def3727d6d25"
/>


## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] 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

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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**
> UI-only responsive styling in the VIP rewards splash with no auth,
data, or navigation logic changes; behavior on tall screens is
preserved.
> 
> **Overview**
> Adds a **750px screen-height breakpoint** so the VIP splash layout
compacts on shorter devices while leaving large-screen sizing unchanged.
> 
> **`VipSplashGradientTitle`** now reads `useWindowDimensions` and
switches title `fontSize`/`lineHeight` from **38px** to **28px** below
the threshold (replacing fixed Tailwind `text-[38px]`).
> 
> **`VipSplashScreenLayout`** applies the same breakpoint to scale the
fox hero (**max 260px** wide, aspect ratio preserved), reduce fox top
margin and footer gap/padding, and use shorter primary (**h-10**) and
secondary (**h-8**) buttons. Shared sizing values live in
**`Vip.constants`**, with unit tests mocking window dimensions for both
breakpoints.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
c67c98e. 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: Cursor <cursoragent@cursor.com>

Author: sophieqgu

app/components/UI/Rewards/components/Vip/Vip.constants.ts

@@ -9,6 +9,11 @@ export const VIP_SPLASH_BACKGROUND_GRADIENT_COLORS = [
 ];
 export const VIP_SPLASH_TITLE_GRADIENT_COLORS = ['#FFE181', '#F7F0D6'];
 export const VIP_SPLASH_ACCEPT_BUTTON_BACKGROUND = '#1E1C17';
+export const VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES = 750;
+export const VIP_SPLASH_TITLE_FONT_SIZE = 38;
+export const VIP_SPLASH_TITLE_FONT_SIZE_SMALL = 28;
+export const VIP_SPLASH_FOX_WIDTH = 320;
+export const VIP_SPLASH_FOX_HEIGHT = 381;
 export const VIP_GOLD_BACKGROUND_GRADIENT_COLORS = ['transparent', '#CBAE6950'];
 export const VIP_GOLD_TIER_GRADIENT_COLORS = [
   'rgba(234, 215, 151, 0.12)',

app/components/UI/Rewards/components/Vip/VipSplashGradientTitle.test.tsx

@@ -1,6 +1,22 @@
 import React from 'react';
+import { useWindowDimensions } from 'react-native';
 import { render } from '@testing-library/react-native';
 import VipSplashGradientTitle from './VipSplashGradientTitle';
+import {
+  VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES,
+  VIP_SPLASH_TITLE_FONT_SIZE,
+  VIP_SPLASH_TITLE_FONT_SIZE_SMALL,
+} from './Vip.constants';
+
+jest.mock('react-native/Libraries/Utilities/useWindowDimensions', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    width: 375,
+    height: 812,
+    scale: 2,
+    fontScale: 1,
+  })),
+}));
 
 jest.mock('@metamask/design-system-react-native', () => {
   const ReactActual = jest.requireActual('react');
@@ -9,11 +25,13 @@ jest.mock('@metamask/design-system-react-native', () => {
   return {
     Text: ({
       children,
+      style,
       testID,
     }: {
       children?: React.ReactNode;
+      style?: unknown;
       testID?: string;
-    }) => ReactActual.createElement(Text, { testID }, children),
+    }) => ReactActual.createElement(Text, { style, testID }, children),
     TextVariant: { DisplayMd: 'displayMd' },
   };
 });
@@ -58,6 +76,15 @@ jest.mock('../../../../../../locales/i18n', () => ({
 }));
 
 describe('VipSplashGradientTitle', () => {
+  beforeEach(() => {
+    jest.mocked(useWindowDimensions).mockReturnValue({
+      width: 375,
+      height: 812,
+      scale: 2,
+      fontScale: 1,
+    });
+  });
+
   it('renders the shared splash title with the provided testID', () => {
     const { getAllByText, getByTestId } = render(
       <VipSplashGradientTitle testID="vip-splash-title" />,
@@ -66,4 +93,41 @@ describe('VipSplashGradientTitle', () => {
     expect(getByTestId('vip-splash-title')).toBeOnTheScreen();
     expect(getAllByText('WELCOME\nTO GOLD FOX\nCOLLECTIVE')).toHaveLength(2);
   });
+
+  it('uses the default title font size on larger screens', () => {
+    const { getByTestId } = render(
+      <VipSplashGradientTitle testID="vip-splash-title" />,
+    );
+
+    expect(getByTestId('vip-splash-title').props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          fontSize: VIP_SPLASH_TITLE_FONT_SIZE,
+          lineHeight: VIP_SPLASH_TITLE_FONT_SIZE,
+        }),
+      ]),
+    );
+  });
+
+  it('uses the smaller title font size on small screens', () => {
+    jest.mocked(useWindowDimensions).mockReturnValue({
+      width: 320,
+      height: VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES - 1,
+      scale: 2,
+      fontScale: 1,
+    });
+
+    const { getByTestId } = render(
+      <VipSplashGradientTitle testID="vip-splash-title" />,
+    );
+
+    expect(getByTestId('vip-splash-title').props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          fontSize: VIP_SPLASH_TITLE_FONT_SIZE_SMALL,
+          lineHeight: VIP_SPLASH_TITLE_FONT_SIZE_SMALL,
+        }),
+      ]),
+    );
+  });
 });

app/components/UI/Rewards/components/Vip/VipSplashGradientTitle.tsx

@@ -1,10 +1,16 @@
 import MaskedView from '@react-native-masked-view/masked-view';
 import React from 'react';
+import { useWindowDimensions } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { Text, TextVariant } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { strings } from '../../../../../../locales/i18n';
-import { VIP_SPLASH_TITLE_GRADIENT_COLORS } from './Vip.constants';
+import {
+  VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES,
+  VIP_SPLASH_TITLE_FONT_SIZE,
+  VIP_SPLASH_TITLE_FONT_SIZE_SMALL,
+  VIP_SPLASH_TITLE_GRADIENT_COLORS,
+} from './Vip.constants';
 
 const titleColorStyle = { color: VIP_SPLASH_TITLE_GRADIENT_COLORS[0] };
 const titleFontStyle = {
@@ -22,11 +28,20 @@ const VipSplashGradientTitle: React.FC<VipSplashGradientTitleProps> = ({
   testID,
 }) => {
   const tw = useTailwind();
+  const { height: screenHeight } = useWindowDimensions();
   const title = strings('rewards.vip.splash_title');
+  const titleFontSize =
+    screenHeight < VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES
+      ? VIP_SPLASH_TITLE_FONT_SIZE_SMALL
+      : VIP_SPLASH_TITLE_FONT_SIZE;
   const titleStyle = tw.style(
-    'text-center text-[38px] leading-[38px] pt-[6px]',
+    'text-center pt-[6px]',
     titleFontStyle,
     titleColorStyle,
+    {
+      fontSize: titleFontSize,
+      lineHeight: titleFontSize,
+    },
   );
 
   return (

app/components/UI/Rewards/components/Vip/VipSplashScreenLayout.test.tsx

@@ -1,9 +1,24 @@
 import React from 'react';
+import { useWindowDimensions, Text } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
-import { Text } from 'react-native';
 import VipSplashScreenLayout, {
   VIP_SPLASH_SCREEN_TEST_IDS,
 } from './VipSplashScreenLayout';
+import {
+  VIP_SPLASH_FOX_HEIGHT,
+  VIP_SPLASH_FOX_WIDTH,
+  VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES,
+} from './Vip.constants';
+
+jest.mock('react-native/Libraries/Utilities/useWindowDimensions', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    width: 375,
+    height: 812,
+    scale: 2,
+    fontScale: 1,
+  })),
+}));
 
 jest.mock('@metamask/design-system-react-native', () => {
   const ReactActual = jest.requireActual('react');
@@ -105,6 +120,12 @@ const defaultProps = {
 describe('VipSplashScreenLayout', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.mocked(useWindowDimensions).mockReturnValue({
+      width: 375,
+      height: 812,
+      scale: 2,
+      fontScale: 1,
+    });
   });
 
   it('renders the shared splash content and primary button label', () => {
@@ -154,4 +175,50 @@ describe('VipSplashScreenLayout', () => {
     expect(getByTestId('vip-splash-footer')).toBeOnTheScreen();
     expect(getByText('Referred by TESTCODE')).toBeOnTheScreen();
   });
+
+  it('uses the default fox image dimensions on larger screens', () => {
+    const { getByTestId } = render(<VipSplashScreenLayout {...defaultProps} />);
+
+    expect(getByTestId(VIP_SPLASH_SCREEN_TEST_IDS.FOX).props).toMatchObject({
+      width: VIP_SPLASH_FOX_WIDTH,
+      height: VIP_SPLASH_FOX_HEIGHT,
+    });
+  });
+
+  it('scales the fox image down on small screens', () => {
+    jest.mocked(useWindowDimensions).mockReturnValue({
+      width: 320,
+      height: VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES - 1,
+      scale: 2,
+      fontScale: 1,
+    });
+
+    const { getByTestId } = render(<VipSplashScreenLayout {...defaultProps} />);
+    const expectedWidth = 260;
+
+    expect(getByTestId(VIP_SPLASH_SCREEN_TEST_IDS.FOX).props).toMatchObject({
+      width: expectedWidth,
+      height: Math.round(
+        expectedWidth * (VIP_SPLASH_FOX_HEIGHT / VIP_SPLASH_FOX_WIDTH),
+      ),
+    });
+  });
+
+  it('uses compact button heights on small screens', () => {
+    jest.mocked(useWindowDimensions).mockReturnValue({
+      width: 320,
+      height: VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES - 1,
+      scale: 2,
+      fontScale: 1,
+    });
+
+    const { getByTestId } = render(<VipSplashScreenLayout {...defaultProps} />);
+
+    expect(
+      getByTestId(VIP_SPLASH_SCREEN_TEST_IDS.ACCEPT_BUTTON).props.style,
+    ).toEqual(expect.arrayContaining(['h-10']));
+    expect(
+      getByTestId(VIP_SPLASH_SCREEN_TEST_IDS.NOT_NOW_BUTTON).props.style,
+    ).toEqual(expect.arrayContaining(['h-8']));
+  });
 });

app/components/UI/Rewards/components/Vip/VipSplashScreenLayout.tsx

@@ -1,5 +1,5 @@
-import React, { type ReactNode } from 'react';
-import { Image, Pressable } from 'react-native';
+import React, { type ReactNode, useMemo } from 'react';
+import { Image, Pressable, useWindowDimensions } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
@@ -17,6 +17,9 @@ import {
   VIP_GOLD_TEXT_MUTED,
   VIP_SPLASH_ACCEPT_BUTTON_BACKGROUND,
   VIP_SPLASH_BACKGROUND_GRADIENT_COLORS,
+  VIP_SPLASH_FOX_HEIGHT,
+  VIP_SPLASH_FOX_WIDTH,
+  VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES,
 } from './Vip.constants';
 import VipSplashGradientTitle from './VipSplashGradientTitle';
 
@@ -72,6 +75,22 @@ const VipSplashScreenLayout: React.FC<VipSplashScreenLayoutProps> = ({
   footerContent,
 }) => {
   const tw = useTailwind();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const isSmallScreen =
+    screenHeight < VIP_SPLASH_MIN_SCREEN_HEIGHT_FOR_SMALL_STYLES;
+  const foxDimensions = useMemo(() => {
+    if (!isSmallScreen) {
+      return { width: VIP_SPLASH_FOX_WIDTH, height: VIP_SPLASH_FOX_HEIGHT };
+    }
+
+    const foxWidth = Math.min(screenWidth - 32, 260);
+    return {
+      width: foxWidth,
+      height: Math.round(
+        foxWidth * (VIP_SPLASH_FOX_HEIGHT / VIP_SPLASH_FOX_WIDTH),
+      ),
+    };
+  }, [isSmallScreen, screenWidth]);
 
   return (
     <LinearGradient
@@ -97,20 +116,23 @@ const VipSplashScreenLayout: React.FC<VipSplashScreenLayoutProps> = ({
           </Text>
           <Image
             source={VipSplashFox}
-            style={tw.style('mt-[54px]')}
+            style={tw.style(isSmallScreen ? 'mt-6' : 'mt-[54px]')}
             testID={testIDs.fox}
-            width={320}
-            height={381}
+            width={foxDimensions.width}
+            height={foxDimensions.height}
           />
         </Box>
 
-        <Box twClassName="gap-[18px] px-4 pb-[18px]">
+        <Box
+          twClassName={`px-4 ${isSmallScreen ? 'gap-3 pb-3' : 'gap-[18px] pb-[18px]'}`}
+        >
           {footerContent}
           <Pressable
             accessibilityRole="button"
             onPress={onPrimaryPress}
             style={tw.style(
-              'h-12 items-center justify-center rounded-[10px] border',
+              'items-center justify-center rounded-[10px] border',
+              isSmallScreen ? 'h-10' : 'h-12',
               primaryButtonBorderStyle,
               primaryButtonBackgroundStyle,
             )}
@@ -127,7 +149,10 @@ const VipSplashScreenLayout: React.FC<VipSplashScreenLayoutProps> = ({
           <Pressable
             accessibilityRole="button"
             onPress={onNotNow}
-            style={tw.style('h-9 items-center justify-center')}
+            style={tw.style(
+              'items-center justify-center',
+              isSmallScreen ? 'h-8' : 'h-9',
+            )}
             testID={testIDs.notNowButton}
           >
             <Text