MetaMask / MetaMask/metamask-mobile

[UI]: 'Search on Google' footer has insufficient bottom spacing in search results

Open
#25,886 0 comments 0 reactions 0 assignees View on GitHub
Design P2
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

## Description

The "Search for X on Google" footer link in the Explore/Trending search results appears too close to the bottom edge of the screen, making the UI feel unpolished and cramped.

## Screenshot

![Search on Google spacing issue](https://github.com/user-attachments/assets/placeholder)

*Note: The "Search for 'Uniswap' on Google" text at the bottom is too close to the screen edge.*

## Current Behavior

The search footer component has minimal vertical padding (`py-4` = 16px) with no additional bottom margin to account for:
- Safe area insets on devices with home indicators (iPhone X and later)
- Visual breathing room from the screen edge
- Overall polish and visual balance

## Expected Behavior

The footer should have adequate bottom spacing to:
1. Respect safe area insets on notched/home-indicator devices
2. Provide sufficient visual padding from the screen edge
3. Look polished and intentional

## Affected Components

- `app/components/UI/Sites/components/SitesSearchFooter/SitesSearchFooter.tsx`
- `app/components/Views/TrendingView/components/ExploreSearchResults/ExploreSearchResults.tsx`
- `app/components/Views/SitesFullView/SitesFullView.tsx`

## Suggested Fix

Add bottom padding or margin to the `SitesSearchFooter` component or the parent container's `contentContainerStyle`. Consider using `useSafeAreaInsets` to dynamically add appropriate bottom spacing.

**Option 1** - Add padding to footer container:
```tsx
// In SitesSearchFooter.tsx

{/* existing content */}

```

**Option 2** - Add bottom inset to FlashList content:
```tsx
// In ExploreSearchResults.tsx
contentContainerStyle={tw.style('px-4 pb-6')}
```

**Option 3** - Use safe area insets for dynamic spacing:
```tsx
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const insets = useSafeAreaInsets();
// Apply insets.bottom + additional padding
```

## Steps to Reproduce

1. Open MetaMask Mobile app
2. Navigate to the Explore/Trending tab
3. Tap on the search bar
4. Enter a search query (e.g., "Uniswap")
5. Scroll to the bottom of the search results
6. Observe the "Search for X on Google" link is too close to the bottom edge

## Platform

- [x] iOS
- [ ] Android (likely affected as well)

## Severity

Low - Visual polish issue, does not affect functionality

Contributor guide

Open the contributing guide

Research direction

Start with app/components/UI/Sites/components/SitesSearchFooter/SitesSearchFooter.tsx, then inspect the listed ExploreSearchResults.tsx and SitesFullView.tsx containers to see where bottom spacing is applied. Reproduce the issue on iOS by scrolling to the search footer. Done means the link has visible bottom breathing room and respects the intended safe-area behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.