fix: alignment and delete button fixes

[bergarces]

Description

Addresses two issues brought up in https://consensyssoftware.atlassian.net/browse/ASSETS-1325

• Title of header is not vertically aligned with action buttons.
• Hides X button in search token input when the content is empty (mimics extension behaviour)

Changelog

CHANGELOG entry: Fixed alignment issue with import token header

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-1325

Manual testing steps

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

Before

After

Pre-merge author checklist

• [X] I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• [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 format if applicable
• [X] I’ve applied the right labels on the PR (see labeling guidelines). 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.

---

[!NOTE] Vertically centers header content across components and hides the search clear icon when the input is empty.

• UI alignment
  • Center-aligns header row contents via HeaderBase.styles.ts (alignItems: 'center'), updating bottom sheet/header snapshots across many views.
• Search UX
  • Adds hideComponent style (opacity: 0) and applies it to the close (X) icon in AssetSearch/index.tsx when searchString is empty; snapshots updated accordingly.

^{Written by Cursor Bugbot for commit a96ad727ff39375b2e6f06d2b079d919ce0e4037. This will update automatically on new commits. Configure here.}

[github-actions[bot]]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions[bot]]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeCore, SmokeWalletUX
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

This PR contains a single CSS styling change in HeaderBase.styles.ts that adds alignItems: 'center' to the base component's flex container style. All 50 changed files are snapshot test updates that automatically reflect this single line style change.

Analysis:

1. Root Change: Single line addition of alignItems: 'center' in HeaderBase.styles.ts
2. Impact Scope: HeaderBase is a reusable component library component used by BottomSheetHeader and various UI components across the app
3. Nature of Change: Pure CSS/styling adjustment that affects visual alignment within the header component - no logic or functionality changes
4. Snapshot Updates: All 50 snapshot files show the same pattern - adding "alignItems": "center" to the style object. This is expected behavior when a shared component's style is updated.

Risk Assessment:

• This is a low-risk change because it only affects visual styling (alignment)
• No business logic, state management, or data flow is affected
• The change is purely cosmetic and affects the vertical alignment of flex items in headers
• All unit test snapshots have been properly updated

Selected Tags:

• SmokeCore: Core wallet functionality/framework - HeaderBase is a component library foundation
• SmokeWalletUX: Wallet user experience and UI - this is a visual/UI change affecting headers across the app

These two tags provide adequate coverage for validating that the visual styling change doesn't break any core flows while keeping the test scope minimal for this low-risk change.

View GitHub Actions results

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud