Tweak spacing

web/packages/accounts/components/LoginComponents.tsx

@@ -54,7 +54,7 @@ export const AccountsPageFooterWithHost: React.FC<React.PropsWithChildren> = ({
     useEffect(() => void customAPIHost().then(setHost), []);
 
     return (
-        <Stack sx={{ gap: 2 }}>
+        <Stack sx={{ gap: 3 }}>
             <AccountsPageFooter>{children}</AccountsPageFooter>
             {host && (
                 <Typography

web/packages/accounts/components/LoginContents.tsx

@@ -80,7 +80,7 @@ export const LoginContents: React.FC<LoginContentsProps> = ({
                 }
             />
             <AccountsPageFooter>
-                <Stack sx={{ gap: 4, textAlign: "center" }}>
+                <Stack sx={{ gap: 3, textAlign: "center" }}>
                     <LinkButton onClick={onSignUp}>
                         {t("no_account")}
                     </LinkButton>

web/packages/accounts/components/SignUpContents.tsx

@@ -339,16 +339,15 @@ export const SignUpContents: React.FC<SignUpContentsProps> = ({
             <AccountsPageTitle>{t("sign_up")}</AccountsPageTitle>
             {form}
             <AccountsPageFooter>
-                <Stack sx={{ gap: 3, textAlign: "center" }}>
+                <Stack sx={{ gap: 5, textAlign: "center" }}>
                     <LinkButton onClick={onLogin}>
                         {t("existing_account")}
                     </LinkButton>
-                    <Typography
-                        variant="mini"
-                        sx={{ color: "text.faint", minHeight: "16px" }}
-                    >
-                        {host ?? "" /* prevent layout shift with a minHeight */}
-                    </Typography>
+                    {host && (
+                        <Typography variant="mini" sx={{ color: "text.faint" }}>
+                            {host}
+                        </Typography>
+                    )}
                 </Stack>
             </AccountsPageFooter>
         </>