Skip to content

fix: remove lineHeight from TextField Input to prevent multi-line text wrapping#24584

Merged
georgewrmarshall merged 3 commits intomainfrom
cursor/text-field-line-height-0336
Jan 15, 2026
Merged

fix: remove lineHeight from TextField Input to prevent multi-line text wrapping#24584
georgewrmarshall merged 3 commits intomainfrom
cursor/text-field-line-height-0336

Conversation

@georgewrmarshall
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall commented Jan 15, 2026

Description

Removed the lineHeight property from TextField Input styles introduced in #21199 to prevent unintended multi-line text wrapping in single-line input fields.

The lineHeight property (20px on iOS, 22px on Android), when combined with the overall input height, inadvertently allowed text to wrap to multiple lines in TextField components, even when multiline={false} was specified. This created an inconsistent user experience where single-line inputs would display text across multiple lines instead of scrolling horizontally for long text.

Related Slack discussion: https://consensys.slack.com/archives/C02U025CVU4/p1768489381842089?thread_ts=1768489381.842089&cid=C02U025CVU4

Changelog

CHANGELOG entry: Fixed a bug where TextField components could wrap text to multiple lines even when multiline={false}

Related issues

Fixes: #24586

Manual testing steps

Feature: TextField single-line input behavior

  Scenario: user enters long text in a single-line TextField
    Given the app is open with a TextField component where multiline={false}
    
    When user enters a long text string that exceeds the visible width
    Then the text should scroll horizontally within the input field
    And the text should not wrap to multiple lines

Screenshots/Recordings

Before

Text would wrap to multiple lines in single-line TextField

before.form720.mov
before.password720.mov

After

Text scrolls horizontally as expected

after.form720.mov
after.password720.mov

Pre-merge author checklist

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

Prevents single-line inputs from wrapping by aligning TextInput styling with platform behavior.

  • Removes lineHeight from app/component-library/components/Form/TextField/foundation/Input/Input.styles.ts base style
  • Updates snapshots across TextField, Snaps UI, Ramp, Bridge, Auth, and other views to reflect the absence of lineHeight in TextInput styles

Written by Cursor Bugbot for commit 6c3b0a1. This will update automatically on new commits. Configure here.

@cursor
Copy link
Copy Markdown

cursor bot commented Jan 15, 2026

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
Learn more about Cursor Agents

@metamaskbot metamaskbot added the team-design-system All issues relating to design system in Mobile label Jan 15, 2026
@georgewrmarshall georgewrmarshall changed the title Text field line height fix: remove lineHeight from TextField Input to prevent multi-line text wrapping Jan 15, 2026
@georgewrmarshall georgewrmarshall force-pushed the cursor/text-field-line-height-0336 branch from e48ee3d to d6fac51 Compare January 15, 2026 18:54
@georgewrmarshall georgewrmarshall self-assigned this Jan 15, 2026
@github-actions
Copy link
Copy Markdown
Contributor

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.

@georgewrmarshall georgewrmarshall force-pushed the cursor/text-field-line-height-0336 branch from d6fac51 to 37308da Compare January 15, 2026 18:58
@georgewrmarshall georgewrmarshall marked this pull request as ready for review January 15, 2026 18:59
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner January 15, 2026 18:59
@github-actions
Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 85%
click to see 🤖 AI reasoning details

This PR contains a single style change in the Input component (Input.styles.ts) that removes the lineHeight property from the input field styles. All 25 other changed files are snapshot updates that reflect this style change.

The change is purely cosmetic - it removes a lineHeight CSS property that was previously set to 20 (iOS) or 22 (Android). This is a minor visual adjustment that affects text rendering in input fields.

While the Input component is used across many features (Snaps, Bridge, Ramps, Card, Login, ChoosePassword, etc.), the change:

  1. Does not modify any functional logic
  2. Does not change component behavior
  3. Is a simple CSS property removal
  4. All snapshot changes are consistent and expected

The risk is low because:

  • No business logic is affected
  • No API calls or data handling is changed
  • The change is well-understood and predictable
  • Unit tests have been updated (snapshots) to reflect the change

E2E tests are not necessary for this type of visual styling change as they would not catch CSS property differences. The unit test snapshots already validate the style changes are applied correctly.

View GitHub Actions results

@sonarqubecloud
Copy link
Copy Markdown

@georgewrmarshall georgewrmarshall added this pull request to the merge queue Jan 15, 2026
Merged via the queue into main with commit 2850aab Jan 15, 2026
58 checks passed
@georgewrmarshall georgewrmarshall deleted the cursor/text-field-line-height-0336 branch January 15, 2026 20:26
@github-actions github-actions bot locked and limited conversation to collaborators Jan 15, 2026
@metamaskbot metamaskbot added the release-7.63.0 Issue or pull request that will be included in release 7.63.0 label Jan 15, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.63.0 Issue or pull request that will be included in release 7.63.0 size-XS team-design-system All issues relating to design system in Mobile

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: TextField components wrap text to multiple lines when multiline={false}

3 participants