mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-03-22 23:30:36 +08:00
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:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -71,6 +71,7 @@ export const authInputError = style({
|
||||
color: cssVar('errorColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
lineHeight: '20px',
|
||||
minHeight: '20px',
|
||||
});
|
||||
|
||||
globalStyle(`${authContent} a`, {
|
||||
|
||||
Reference in New Issue
Block a user