fix: input style priority (#5383)

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

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

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

@@ -2,7 +2,6 @@ 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,
@@ -33,12 +32,12 @@ export const RenameModal = ({
       }}
       items={
         <Input
-          className={styles.input}
           autoFocus
           defaultValue={value}
           onChange={setValue}
           onEnter={handleRename}
           data-testid="rename-modal-input"
+          style={{ width: 220, height: 34 }}
         />
       }
     >

packages/frontend/core/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -203,7 +203,7 @@ export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
           <Input
             disabled={workspaceIsLoading || !isOwner}
             value={input}
-            className={styles.workspaceNameInput}
+            style={{ width: 280, height: 32 }}
             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,8 +201,3 @@ 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

@@ -137,12 +137,12 @@ export const AvatarAndName = () => {
           <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}
+              style={{ width: 280, height: 32 }}
               onChange={setInput}
               onEnter={handleUpdateUserName}
             />

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

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

packages/plugins/copilot/src/UI/debug-content.tsx

@@ -5,7 +5,6 @@ import { type ReactElement, useCallback } from 'react';
 
 import { openAIApiKeyAtom } from '../core/hooks';
 import { conversationHistoryDBName } from '../core/langchain/message-history';
-import * as styles from './index.css';
 
 export const DebugContent = (): ReactElement => {
   const [key, setKey] = useAtom(openAIApiKeyAtom);
@@ -13,7 +12,7 @@ export const DebugContent = (): ReactElement => {
     <div>
       <FlexWrapper justifyContent="space-between">
         <Input
-          className={styles.debugContentInput}
+          style={{ width: 280 }}
           defaultValue={key ?? undefined}
           onChange={useCallback(
             (newValue: string) => {

packages/plugins/copilot/src/UI/index.css.ts

@@ -41,7 +41,3 @@ export const sendButtonStyle = style({
     backgroundColor: 'transparent',
   },
 });
-
-export const debugContentInput = style({
-  width: '280px',
-});