From d0977cb5934e8c133f3abd16bf045cd021c25827 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Mon, 18 Dec 2023 12:31:45 +0000
Subject: [PATCH] chore: improve display of lock screen, closes #4606

---
 src/app/components/request-password.tsx                     | 6 +++---
 src/app/components/secret-key/two-column.layout.tsx         | 4 +++-
 .../onboarding/set-password/components/password-field.tsx   | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
index 1cca4ecdea0..c9c42010869 100644
--- a/src/app/components/request-password.tsx
+++ b/src/app/components/request-password.tsx
@@ -62,7 +62,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
             >
               {title}
             </styled.h1>
-            <styled.p textStyle={['label.01', 'heading.05']} mb="space.06">
+            <styled.p textStyle={['label.01', 'heading.05']} mb="space.06" textAlign="left">
               {(isRunning && waitingMessage) || caption}
             </styled.p>
           </>
@@ -78,7 +78,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
             >
               Your password
             </styled.h2>
-            <Stack gap="space.04" alignItems="center">
+            <Stack gap="space.04" alignItems="center" minHeight="100px">
               <styled.input
                 _focus={{ border: 'focus' }}
                 autoCapitalize="off"
@@ -102,7 +102,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
                 value={password}
                 width="100%"
               />
-              {error && <ErrorLabel>{error}</ErrorLabel>}
+              {error && <ErrorLabel width="100%">{error}</ErrorLabel>}
             </Stack>
             <LeatherButton
               data-testid={SettingsSelectors.UnlockWalletBtn}
diff --git a/src/app/components/secret-key/two-column.layout.tsx b/src/app/components/secret-key/two-column.layout.tsx
index 460c9d43939..edede01fbb7 100644
--- a/src/app/components/secret-key/two-column.layout.tsx
+++ b/src/app/components/secret-key/two-column.layout.tsx
@@ -26,7 +26,9 @@ export function TwoColumnLayout({
         gap="space.07"
         mx={['auto', 'space.03', 'space.03', 'space.03']}
       >
-        <styled.div maxWidth="440px">{leftColumn}</styled.div>
+        <styled.div width="390px" textAlign="left">
+          {leftColumn}
+        </styled.div>
       </Flex>
 
       <Flex
diff --git a/src/app/pages/onboarding/set-password/components/password-field.tsx b/src/app/pages/onboarding/set-password/components/password-field.tsx
index d2944b07ad6..ffdb59c97fb 100644
--- a/src/app/pages/onboarding/set-password/components/password-field.tsx
+++ b/src/app/pages/onboarding/set-password/components/password-field.tsx
@@ -70,7 +70,7 @@ export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps
         strengthResult={strengthResult}
       />
       <Flex alignItems="center">
-        <Caption mx="space.04">Password strength:</Caption>
+        <Caption mr="space.02">Password strength:</Caption>
         <Caption>{field.value ? strengthText : '—'}</Caption>
       </Flex>
     </>