fix: remove lineHeight from TextField Input to prevent multi-line text wrapping#24584
Conversation
|
Cursor Agent can help with this pull request. Just |
e48ee3d to
d6fac51
Compare
|
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. |
d6fac51 to
37308da
Compare
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsThis PR contains a single style change in the Input component (Input.styles.ts) that removes the 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:
The risk is low because:
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. |
|



Description
Removed the
lineHeightproperty from TextField Input styles introduced in #21199 to prevent unintended multi-line text wrapping in single-line input fields.The
lineHeightproperty (20px on iOS, 22px on Android), when combined with the overall input height, inadvertently allowed text to wrap to multiple lines inTextFieldcomponents, even whenmultiline={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
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
Note
Prevents single-line inputs from wrapping by aligning TextInput styling with platform behavior.
lineHeightfromapp/component-library/components/Form/TextField/foundation/Input/Input.styles.tsbasestylelineHeightin TextInput stylesWritten by Cursor Bugbot for commit 6c3b0a1. This will update automatically on new commits. Configure here.