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/core/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -22,7 +22,7 @@ import {
 
 import { validateAndReduceImage } from '../../../utils/reduce-image';
 import { Upload } from '../../pure/file-upload';
-import * as style from './style.css';
+import * as styles from './style.css';
 import type { WorkspaceSettingDetailProps } from './types';
 
 export interface ProfilePanelProps extends WorkspaceSettingDetailProps {
@@ -168,7 +168,7 @@ export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
   const canAdjustAvatar = !workspaceIsLoading && avatarUrl && isOwner;
 
   return (
-    <div className={style.profileWrapper}>
+    <div className={styles.profileWrapper}>
       <Upload
         accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
         fileChange={handleUploadAvatar}
@@ -198,13 +198,12 @@ export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
       </Upload>
 
       <Wrapper marginLeft={20}>
-        <div className={style.label}>{t['Workspace Name']()}</div>
+        <div className={styles.label}>{t['Workspace Name']()}</div>
         <FlexWrapper alignItems="center" flexGrow="1">
           <Input
             disabled={workspaceIsLoading || !isOwner}
-            width={280}
-            height={32}
             value={input}
+            className={styles.workspaceNameInput}
             data-testid="workspace-name-input"
             placeholder={t['Workspace Name']()}
             maxLength={64}

packages/frontend/core/src/components/affine/new-workspace-setting-detail/style.css.ts

@@ -201,3 +201,8 @@ export const arrowRight = style({
   color: 'var(--affine-text-emphasis-color)',
   cursor: 'pointer',
 });
+
+export const workspaceNameInput = style({
+  height: '32px',
+  width: '280px',
+});

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -38,7 +38,7 @@ import { useSelfHosted } from '../../../../hooks/affine/use-server-flavor';
 import { useUserSubscription } from '../../../../hooks/use-subscription';
 import { validateAndReduceImage } from '../../../../utils/reduce-image';
 import { Upload } from '../../../pure/file-upload';
-import * as style from './style.css';
+import * as styles from './style.css';
 
 export const UserAvatar = () => {
   const t = useAFFiNEI18N();
@@ -133,17 +133,16 @@ export const AvatarAndName = () => {
           <UserAvatar />
         </Suspense>
 
-        <div className={style.profileInputWrapper}>
+        <div className={styles.profileInputWrapper}>
           <label>{t['com.affine.settings.profile.name']()}</label>
           <FlexWrapper alignItems="center">
             <Input
+              className={styles.userNameInput}
               defaultValue={input}
               data-testid="user-name-input"
               placeholder={t['com.affine.settings.profile.placeholder']()}
               maxLength={64}
               minLength={0}
-              width={280}
-              height={28}
               onChange={setInput}
               onEnter={handleUpdateUserName}
             />
@@ -151,7 +150,7 @@ export const AvatarAndName = () => {
               <Button
                 data-testid="save-user-name"
                 onClick={handleUpdateUserName}
-                className={style.button}
+                className={styles.button}
                 style={{
                   marginLeft: '12px',
                 }}
@@ -244,7 +243,7 @@ export const AccountSetting: FC = () => {
       />
       <AvatarAndName />
       <SettingRow name={t['com.affine.settings.email']()} desc={user.email}>
-        <Button onClick={onChangeEmail} className={style.button}>
+        <Button onClick={onChangeEmail} className={styles.button}>
           {t['com.affine.settings.email.action']()}
         </Button>
       </SettingRow>
@@ -252,7 +251,7 @@ export const AccountSetting: FC = () => {
         name={t['com.affine.settings.password']()}
         desc={t['com.affine.settings.password.message']()}
       >
-        <Button onClick={onPasswordButtonClick} className={style.button}>
+        <Button onClick={onPasswordButtonClick} className={styles.button}>
           {user.hasPassword
             ? t['com.affine.settings.password.action.change']()
             : t['com.affine.settings.password.action.set']()}

packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts

@@ -43,3 +43,8 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
 export const button = style({
   padding: '4px 12px',
 });
+
+export const userNameInput = style({
+  height: '32px',
+  width: '280px',
+});