MetaMask / MetaMask/metamask-mobile
[UI]: 'Search on Google' footer has insufficient bottom spacing in search results
- 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

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