Is there an existing issue for this?
What happened?
Description
On the OTP/"Verify Email" screen (shown during signup and password reset flows), digits typed into the 6-box code entry field render visually clipped at the top and bottom of each box, rather than appearing fully visible and vertically centered. This makes the entered code harder to read and confirm before submitting, and looks visually broken/unpolished the characters look cut off rather than cleanly contained within their box.
Steps to Reproduce
- From the login screen, tap "Sign Up".
- Fill in the "Create the Team" form (team name, admin name, email, password) and submit OR, alternatively, use "Forgot Password" from the login screen and enter an email.
- You'll land on the "Verify Email" screen showing 6 empty input boxes for the code.
- Tap into the first box and type any digit (e.g. "1"), then a second digit into the next box (e.g. "2").
- Observe the rendered digits in the boxes.
Expected Behavior
Each typed digit should render fully visible, cleanly centered within its box, with consistent padding above and below the character matching how digits/text typically render inside a rounded input field elsewhere in the app.
Actual Behavior
The digit is visibly clipped at the top and bottom edges of the box part of the character appears cut off by the box's border/rounded corners rather than sitting with breathing room inside it. This is consistent across every box in the row, and reproducible every time a digit is entered.
Screenshot
Affected File
lib/screens/auth/verify_otp_screen.dart — specifically the OTP box's TextField and its InputDecoration (font size, content padding, and vertical alignment settings for the digit box).
Suggested Fix
Likely caused by the box's fixed container height not properly accommodating the TextField's default line-height metrics at the current font size, combined with the text not being explicitly vertically centered. A minimal, low-risk fix would be:
- Adding
textAlignVertical: TextAlignVertical.center to the box's TextField
- Adjusting
contentPadding and/or isDense in its InputDecoration so the glyph renders fully within the box's fixed height without being clipped
Record
Is there an existing issue for this?
What happened?
Description
On the OTP/"Verify Email" screen (shown during signup and password reset flows), digits typed into the 6-box code entry field render visually clipped at the top and bottom of each box, rather than appearing fully visible and vertically centered. This makes the entered code harder to read and confirm before submitting, and looks visually broken/unpolished the characters look cut off rather than cleanly contained within their box.
Steps to Reproduce
Expected Behavior
Each typed digit should render fully visible, cleanly centered within its box, with consistent padding above and below the character matching how digits/text typically render inside a rounded input field elsewhere in the app.
Actual Behavior
The digit is visibly clipped at the top and bottom edges of the box part of the character appears cut off by the box's border/rounded corners rather than sitting with breathing room inside it. This is consistent across every box in the row, and reproducible every time a digit is entered.
Screenshot
Affected File
lib/screens/auth/verify_otp_screen.dart— specifically the OTP box'sTextFieldand itsInputDecoration(font size, content padding, and vertical alignment settings for the digit box).Suggested Fix
Likely caused by the box's fixed container height not properly accommodating the
TextField's default line-height metrics at the current font size, combined with the text not being explicitly vertically centered. A minimal, low-risk fix would be:textAlignVertical: TextAlignVertical.centerto the box'sTextFieldcontentPaddingand/orisDensein itsInputDecorationso the glyph renders fully within the box's fixed height without being clippedRecord