fix(core): reserve space for auth input error to avoid layout shift (#14670)

Prevents layout shift when showing auth input errors by reserving space
for the error message. Improves visual stability and avoids UI jumps
when validation errors appear.

### Before 


https://github.com/user-attachments/assets/7439aa5e-069d-42ac-8963-e5cdee341ad9



### After

https://github.com/user-attachments/assets/8e758452-5323-4807-8a0d-38913303020d


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved error message display mechanism in authentication components
for more consistent rendering.

* **Style**
* Enhanced vertical spacing for error messages in form inputs to ensure
better visual consistency and readability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
chauhan_s
2026-03-18 08:18:50 +05:30
committed by GitHub
parent 1112a06623
commit fbfcc01d14
2 changed files with 7 additions and 3 deletions

View File

@@ -32,9 +32,12 @@ export const AuthInput = ({
onEnter={onEnter}
{...inputProps}
/>
{error && errorHint ? (
<div className={styles.authInputError}>{errorHint}</div>
) : null}
<div
className={styles.authInputError}
style={{ visibility: error ? 'visible' : 'hidden' }}
>
{errorHint}
</div>
</div>
);
};

View File

@@ -71,6 +71,7 @@ export const authInputError = style({
color: cssVar('errorColor'),
fontSize: cssVar('fontXs'),
lineHeight: '20px',
minHeight: '20px',
});
globalStyle(`${authContent} a`, {