Fix width handling for deactivated screen (#5810)

1 files changed, 105 insertions, 112 deletions

diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx
index 2d14b18db..36b96cacd 100644
--- a/src/screens/Deactivated.tsx
+++ b/src/screens/Deactivated.tsx
@@ -106,124 +106,117 @@ export function Deactivated() {
   return (
     <View style={[a.util_screen_outer, a.flex_1, t.atoms.bg]}>
       <ScrollView
-        style={[a.h_full, a.w_full]}
-        contentContainerStyle={{borderWidth: 0}}>
-        <View
-          style={[
-            a.px_2xl,
-            {
-              paddingTop: isWeb ? 64 : insets.top + 16,
-              paddingBottom: isWeb ? 64 : insets.bottom,
-            },
-          ]}>
-          <View style={[a.flex_row, a.justify_center]}>
-            <View style={[a.w_full, {maxWidth: COL_WIDTH}]}>
-              <View
-                style={[a.w_full, a.justify_center, a.align_center, a.pb_5xl]}>
-                <Logo width={40} />
-              </View>
-
-              <View style={[a.gap_xs, a.pb_3xl]}>
-                <Text style={[a.text_xl, a.font_bold, a.leading_snug]}>
-                  <Trans>Welcome back!</Trans>
-                </Text>
-                <Text style={[a.text_sm, a.leading_snug]}>
-                  <Trans>
-                    You previously deactivated @{currentAccount?.handle}.
-                  </Trans>
-                </Text>
-                <Text style={[a.text_sm, a.leading_snug, a.pb_md]}>
-                  <Trans>
-                    You can reactivate your account to continue logging in. Your
-                    profile and posts will be visible to other users.
-                  </Trans>
-                </Text>
+        style={[
+          a.h_full,
+          a.w_full,
+          a.px_2xl,
+          {
+            paddingTop: isWeb ? 64 : insets.top + 16,
+            paddingBottom: isWeb ? 64 : insets.bottom,
+          },
+        ]}
+        contentContainerStyle={[
+          a.w_full,
+          a.flex_row,
+          a.justify_center,
+          {borderWidth: 0},
+        ]}>
+        <View style={[a.w_full, {maxWidth: COL_WIDTH}]}>
+          <View style={[a.w_full, a.justify_center, a.align_center, a.pb_5xl]}>
+            <Logo width={40} />
+          </View>
 
-                <View style={[a.gap_sm]}>
-                  <Button
-                    label={_(msg`Reactivate your account`)}
-                    size="large"
-                    variant="solid"
-                    color="primary"
-                    onPress={handleActivate}>
-                    <ButtonText>
-                      <Trans>Yes, reactivate my account</Trans>
-                    </ButtonText>
-                    {pending && <ButtonIcon icon={Loader} position="right" />}
-                  </Button>
-                  <Button
-                    label={_(msg`Cancel reactivation and log out`)}
-                    size="large"
-                    variant="solid"
-                    color="secondary"
-                    onPress={onPressLogout}>
-                    <ButtonText>
-                      <Trans>Cancel</Trans>
-                    </ButtonText>
-                  </Button>
-                </View>
+          <View style={[a.gap_xs, a.pb_3xl]}>
+            <Text style={[a.text_xl, a.font_bold, a.leading_snug]}>
+              <Trans>Welcome back!</Trans>
+            </Text>
+            <Text style={[a.text_sm, a.leading_snug]}>
+              <Trans>
+                You previously deactivated @{currentAccount?.handle}.
+              </Trans>
+            </Text>
+            <Text style={[a.text_sm, a.leading_snug, a.pb_md]}>
+              <Trans>
+                You can reactivate your account to continue logging in. Your
+                profile and posts will be visible to other users.
+              </Trans>
+            </Text>
 
-                {error && (
-                  <View
-                    style={[
-                      a.flex_row,
-                      a.gap_sm,
-                      a.mt_md,
-                      a.p_md,
-                      a.rounded_sm,
-                      t.atoms.bg_contrast_25,
-                    ]}>
-                    <CircleInfo size="md" fill={t.palette.negative_400} />
-                    <Text style={[a.flex_1, a.leading_snug]}>{error}</Text>
-                  </View>
-                )}
-              </View>
+            <View style={[a.gap_sm]}>
+              <Button
+                label={_(msg`Reactivate your account`)}
+                size="large"
+                variant="solid"
+                color="primary"
+                onPress={handleActivate}>
+                <ButtonText>
+                  <Trans>Yes, reactivate my account</Trans>
+                </ButtonText>
+                {pending && <ButtonIcon icon={Loader} position="right" />}
+              </Button>
+              <Button
+                label={_(msg`Cancel reactivation and log out`)}
+                size="large"
+                variant="solid"
+                color="secondary"
+                onPress={onPressLogout}>
+                <ButtonText>
+                  <Trans>Cancel</Trans>
+                </ButtonText>
+              </Button>
+            </View>
 
-              <View style={[a.pb_3xl]}>
-                <Divider />
+            {error && (
+              <View
+                style={[
+                  a.flex_row,
+                  a.gap_sm,
+                  a.mt_md,
+                  a.p_md,
+                  a.rounded_sm,
+                  t.atoms.bg_contrast_25,
+                ]}>
+                <CircleInfo size="md" fill={t.palette.negative_400} />
+                <Text style={[a.flex_1, a.leading_snug]}>{error}</Text>
               </View>
+            )}
+          </View>
 
-              {hasOtherAccounts ? (
-                <>
-                  <Text
-                    style={[
-                      t.atoms.text_contrast_medium,
-                      a.pb_md,
-                      a.leading_snug,
-                    ]}>
-                    <Trans>Or, log into one of your other accounts.</Trans>
-                  </Text>
-                  <AccountList
-                    onSelectAccount={onSelectAccount}
-                    onSelectOther={onPressAddAccount}
-                    otherLabel={_(msg`Add account`)}
-                    pendingDid={pendingDid}
-                  />
-                </>
-              ) : (
-                <>
-                  <Text
-                    style={[
-                      t.atoms.text_contrast_medium,
-                      a.pb_md,
-                      a.leading_snug,
-                    ]}>
-                    <Trans>Or, continue with another account.</Trans>
-                  </Text>
-                  <Button
-                    label={_(msg`Log in or sign up`)}
-                    size="large"
-                    variant="solid"
-                    color="secondary"
-                    onPress={() => setShowLoggedOut(true)}>
-                    <ButtonText>
-                      <Trans>Log in or sign up</Trans>
-                    </ButtonText>
-                  </Button>
-                </>
-              )}
-            </View>
+          <View style={[a.pb_3xl]}>
+            <Divider />
           </View>
+
+          {hasOtherAccounts ? (
+            <>
+              <Text
+                style={[t.atoms.text_contrast_medium, a.pb_md, a.leading_snug]}>
+                <Trans>Or, log into one of your other accounts.</Trans>
+              </Text>
+              <AccountList
+                onSelectAccount={onSelectAccount}
+                onSelectOther={onPressAddAccount}
+                otherLabel={_(msg`Add account`)}
+                pendingDid={pendingDid}
+              />
+            </>
+          ) : (
+            <>
+              <Text
+                style={[t.atoms.text_contrast_medium, a.pb_md, a.leading_snug]}>
+                <Trans>Or, continue with another account.</Trans>
+              </Text>
+              <Button
+                label={_(msg`Log in or sign up`)}
+                size="large"
+                variant="solid"
+                color="secondary"
+                onPress={() => setShowLoggedOut(true)}>
+                <ButtonText>
+                  <Trans>Log in or sign up</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          )}
         </View>
       </ScrollView>
     </View>