fix(homepage): vertically center Buy button in PopularTokenRow (#26632)

## **Description**

Fixes the Buy button not being vertically centered in the
`PopularTokenRow` component on the Homepage Tokens section (zero balance
state).

The issue was caused by a fixed `h-16` (64px) height on the row
container. When the content (e.g., mUSD description) wrapped to multiple
lines, the button stayed top-aligned instead of centering.

**Changes:**
- Replace fixed `h-16` height with `py-2` padding so rows grow naturally
with content
- Wrap the Buy button in a `self-center` Box to ensure vertical
centering regardless of row height

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Refs: https://consensyssoftware.atlassian.net/browse/TMCU-407

## **Manual testing steps**

```gherkin
Feature: Buy button vertical centering in PopularTokenRow

  Scenario: Buy button is vertically centered on single-line rows
    Given user has a zero balance account
    And user is on the Homepage

    When user views the Tokens section
    Then each Buy button is vertically centered with the token name and price

  Scenario: Buy button is vertically centered on multi-line rows
    Given user has a zero balance account
    And mUSD row has a multi-line description

    When user views the Tokens section
    Then the Buy button on the mUSD row is vertically centered with the content
```

## **Screenshots/Recordings**

### **Before**

<!-- Buy button top-aligned on multi-line rows -->

### **After**

<!-- Buy button vertically centered on all rows -->

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

## **Pre-merge reviewer checklist**

- [ ] 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 layout tweak: replaces a fixed row height with
padding and adjusts Buy button container alignment, which could slightly
affect row spacing/height but has no data or logic impact.
> 
> **Overview**
> Fixes vertical alignment issues in `PopularTokenRow` when token
details wrap to multiple lines.
> 
> The row layout now uses `py-2` instead of a fixed `h-16` height so it
can grow with content, and the Buy button is wrapped in a `self-center`
container to keep it vertically centered regardless of row height.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d1952a3. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: wachunei

app/components/Views/Homepage/Sections/Tokens/components/PopularTokenRow.tsx

@@ -183,7 +183,7 @@ const PopularTokenRow: React.FC<PopularTokenRowProps> = ({ token }) => {
       <Box
         flexDirection={BoxFlexDirection.Row}
         alignItems={BoxAlignItems.Center}
-        twClassName="h-16"
+        twClassName="py-2"
       >
         {/* Token Avatar */}
         <AvatarToken
@@ -233,13 +233,15 @@ const PopularTokenRow: React.FC<PopularTokenRowProps> = ({ token }) => {
         </Box>
 
         {/* Buy Button */}
-        <Button
-          variant={ButtonVariant.Secondary}
-          size={ButtonSize.Md}
-          onPress={handleBuy}
-        >
-          {strings('asset_overview.buy_button')}
-        </Button>
+        <Box twClassName="self-center">
+          <Button
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Md}
+            onPress={handleBuy}
+          >
+            {strings('asset_overview.buy_button')}
+          </Button>
+        </Box>
       </Box>
     </TouchableOpacity>
   );