From 228bf49eb33ee5cdedce0efec32a9e9fa2f18279 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 21 Nov 2024 10:43:51 +0530
Subject: [PATCH] Prevent layout shift

---
 web/packages/accounts/components/PasswordStrength.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/packages/accounts/components/PasswordStrength.tsx b/web/packages/accounts/components/PasswordStrength.tsx
index 0fb597a2ee..d543f5cd6e 100644
--- a/web/packages/accounts/components/PasswordStrength.tsx
+++ b/web/packages/accounts/components/PasswordStrength.tsx
@@ -19,8 +19,9 @@ export const PasswordStrengthHint: React.FC<PasswordStrengthHintProps> = ({
         <Typography
             variant="small"
             sx={(theme) => ({
-                marginBlock: "8px 4px",
+                mt: "8px",
                 alignSelf: "flex-start",
+                whiteSpace: "pre",
                 color:
                     passwordStrength == "weak"
                         ? theme.colors.danger.A700
@@ -31,7 +32,8 @@ export const PasswordStrengthHint: React.FC<PasswordStrengthHintProps> = ({
         >
             {password
                 ? t("passphrase_strength", { context: passwordStrength })
-                : ""}
+                : /* empty space + white-space: pre to prevent layout shift. */
+                  " "}
         </Typography>
     );
 };