From fbfcc01d1451234043f3b722d10412ad3e0aa802 Mon Sep 17 00:00:00 2001
From: chauhan_s <somaychauhan98@gmail.com>
Date: Wed, 18 Mar 2026 08:18:50 +0530
Subject: [PATCH] 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 -->
---
 .../src/components/auth-components/auth-input.tsx        | 9 ++++++---
 .../src/components/auth-components/share.css.ts          | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/component/src/components/auth-components/auth-input.tsx b/packages/frontend/component/src/components/auth-components/auth-input.tsx
index 053601a226..f756d288de 100644
--- a/packages/frontend/component/src/components/auth-components/auth-input.tsx
+++ b/packages/frontend/component/src/components/auth-components/auth-input.tsx
@@ -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>
   );
 };
diff --git a/packages/frontend/component/src/components/auth-components/share.css.ts b/packages/frontend/component/src/components/auth-components/share.css.ts
index d7d6fb9d25..15e6af73ca 100644
--- a/packages/frontend/component/src/components/auth-components/share.css.ts
+++ b/packages/frontend/component/src/components/auth-components/share.css.ts
@@ -71,6 +71,7 @@ export const authInputError = style({
   color: cssVar('errorColor'),
   fontSize: cssVar('fontXs'),
   lineHeight: '20px',
+  minHeight: '20px',
 });
 
 globalStyle(`${authContent} a`, {