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}

packages/frontend/component/src/components/member-components/invite-modal.tsx

@@ -74,9 +74,6 @@ export const InviteModal = ({
         error={!isValidEmail}
         errorHint={isValidEmail ? '' : t['com.affine.auth.sign.email.error']()}
         onEnter={handleConfirm}
-        wrapperProps={{
-          style: { padding: 0 },
-        }}
         size="large"
       />
     </ConfirmModal>

packages/frontend/component/src/components/rename-modal/index.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const input = style({
+  height: '34px',
+  width: '220px',
+});

packages/frontend/component/src/components/rename-modal/index.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 
 import Input from '../../ui/input';
 import { Menu } from '../../ui/menu';
+import * as styles from './index.css';
 
 export const RenameModal = ({
   onRename,
@@ -32,9 +33,8 @@ export const RenameModal = ({
       }}
       items={
         <Input
+          className={styles.input}
           autoFocus
-          width={220}
-          style={{ height: 34 }}
           defaultValue={value}
           onChange={setValue}
           onEnter={handleRename}