fix: fix the login container; fix the incorrect input of captcha enter trigger (#5327)

projects/app/src/components/support/user/safe/SendCodeAuthModal.tsx

@@ -32,6 +32,20 @@ const SendCodeAuthModal = ({
     runAsync: getCaptcha
   } = useRequest2(() => getCaptchaPic(username), { manual: false });
 
+  const onSubmit = async ({ code }: { code: string }) => {
+    await onSendCode({ username, captcha: code });
+    onClose();
+  };
+
+  const onError = (err: any) => {
+    console.log(err);
+  };
+
+  const handleEnterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key.toLowerCase() !== 'enter') return;
+    handleSubmit(onSubmit, onError)();
+  };
+
   return (
     <MyModal isOpen={true}>
       <ModalBody pt={8}>
@@ -55,25 +69,17 @@ const SendCodeAuthModal = ({
           />
         </Skeleton>
 
-        <Input placeholder={t('common:support.user.captcha_placeholder')} {...register('code')} />
+        <Input
+          placeholder={t('common:support.user.captcha_placeholder')}
+          {...register('code')}
+          onKeyDown={handleEnterKeyDown}
+        />
       </ModalBody>
       <ModalFooter gap={2}>
         <Button isLoading={onSending} variant={'whiteBase'} onClick={onClose}>
           {t('common:Cancel')}
         </Button>
-        <Button
-          isLoading={onSending}
-          onClick={handleSubmit(
-            ({ code }) => {
-              return onSendCode({ username, captcha: code }).then(() => {
-                onClose();
-              });
-            },
-            (err) => {
-              console.log(err);
-            }
-          )}
-        >
+        <Button isLoading={onSending} onClick={handleSubmit(onSubmit, onError)}>
           {t('common:Confirm')}
         </Button>
       </ModalFooter>

projects/app/src/pageComponents/login/LoginModal.tsx

@@ -23,7 +23,7 @@ const LoginModal = ({ onSuccess }: LoginModalProps) => {
       maxW="556px"
       maxH={['100vh', '90vh']}
       borderRadius={[0, '16px']}
-      overflow="auto"
+      overflow="hidden"
     >
       <Box
         px={['5vw', '88px']}

projects/app/src/pageComponents/login/index.tsx

@@ -242,9 +242,9 @@ export const LoginContainer = ({
         />
       )}
 
-      <Box position="relative" w="full" h="full">
+      <Box position="relative" w="full" flex={'1 0 0'}>
         {/* main content area */}
-        <Box w={['100%', '380px']} minH={['100vh', '600px']} flex={'1 0 0'}>
+        <Box w={['100%', '380px']} flex={'1 0 0'}>
           {pageType && DynamicComponent ? DynamicComponent : <Loading fixed={false} />}
         </Box>