fix(component): fix incorrect input component width and height styling (#5292)

after:

https://github.com/toeverything/AFFiNE/assets/102217452/5d8f51c5-c7a6-4ec8-b2b0-7f1391f045c7

packages/frontend/component/src/components/auth-components/auth-input.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import type { FC, HTMLAttributes } from 'react';
 
 import { Input, type InputProps } from '../../ui/input';
 import * as styles from './share.css';
@@ -9,27 +8,25 @@ export type AuthInputProps = InputProps & {
   errorHint?: string;
   withoutHint?: boolean;
   onEnter?: () => void;
-  wrapperProps?: HTMLAttributes<HTMLDivElement>;
 };
-export const AuthInput: FC<AuthInputProps> = ({
+export const AuthInput = ({
   label,
   error,
   errorHint,
   withoutHint = false,
   onEnter,
-  wrapperProps: { className, ...otherWrapperProps } = {},
+  className,
   ...inputProps
-}) => {
+}: AuthInputProps) => {
   return (
     <div
-      className={clsx(styles.authInputWrapper, className, {
+      className={clsx(styles.authInputWrapper, {
         'without-hint': withoutHint,
       })}
-      {...otherWrapperProps}
     >
       {label ? <label>{label}</label> : null}
       <Input
-        className={styles.input}
+        className={clsx(className)}
         size="extraLarge"
         status={error ? 'error' : 'default'}
         onKeyDown={e => {

packages/frontend/component/src/components/auth-components/change-email-page.tsx

@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 import { Button } from '../../ui/button';
 import { AuthInput } from './auth-input';
 import { AuthPageContainer } from './auth-page-container';
+import * as styles from './share.css';
 import { emailRegex } from './utils';
 
 export const ChangeEmailPage = ({
@@ -44,6 +45,7 @@ export const ChangeEmailPage = ({
     >
       <>
         <AuthInput
+          className={styles.input}
           label={t['com.affine.settings.email']()}
           placeholder={t['com.affine.auth.sign.email.placeholder']()}
           value={email}