Styling for all forms.

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -25,7 +25,7 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
+    <Form onSubmit={handleSubmit} error={error}>
       <FormField name="name" label={formatMessage(labels.name)}>
         <TextField autoComplete="off" />
       </FormField>

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -25,7 +25,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
+    <Form onSubmit={handleSubmit} error={error}>
       <FormField
         label={formatMessage(labels.accessCode)}
         name="accessCode"

src/app/(main)/settings/teams/TeamLeaveButton.tsx

@@ -24,7 +24,7 @@ export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName
         <Text>{formatMessage(labels.leave)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.leaveTeam)}>
+        <Dialog title={formatMessage(labels.leaveTeam)} style={{ width: 400 }}>
           {({ close }) => (
             <TeamLeaveForm
               teamId={teamId}

src/app/(main)/settings/teams/TeamsAddButton.tsx

@@ -24,7 +24,7 @@ export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
         <Text>{formatMessage(labels.createTeam)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.createTeam)}>
+        <Dialog title={formatMessage(labels.createTeam)} style={{ width: 400 }}>
           {({ close }) => <TeamAddForm onSave={handleSave} onClose={close} />}
         </Dialog>
       </Modal>

src/app/(main)/settings/teams/TeamsJoinButton.tsx

@@ -22,7 +22,7 @@ export function TeamsJoinButton() {
         <Text>{formatMessage(labels.joinTeam)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.joinTeam)}>
+        <Dialog title={formatMessage(labels.joinTeam)} style={{ width: 400 }}>
           {({ close }) => <TeamJoinForm onSave={handleJoin} onClose={close} />}
         </Dialog>
       </Modal>

src/app/(main)/settings/teams/[teamId]/TeamDetails.tsx

@@ -41,7 +41,7 @@ export function TeamDetails({ teamId }: { teamId: string }) {
           <Tab id="websites">{formatMessage(labels.websites)}</Tab>
           {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
         </TabList>
-        <TabPanel id="details">
+        <TabPanel id="details" style={{ width: 500 }}>
           <TeamEditForm teamId={teamId} allowEdit={canEdit} />
         </TabPanel>
         <TabPanel id="members">

src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx

@@ -45,7 +45,7 @@ export function TeamEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }} style={{ width: 400 }}>
+    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
       {({ setValue }) => {
         return (
           <>

src/app/(main)/settings/teams/[teamId]/TeamManage.tsx

@@ -22,7 +22,7 @@ export function TeamManage({ teamId }: { teamId: string }) {
       <DialogTrigger>
         <Button variant="danger">{formatMessage(labels.delete)}</Button>
         <Modal>
-          <Dialog title={formatMessage(labels.deleteTeam)}>
+          <Dialog title={formatMessage(labels.deleteTeam)} style={{ width: 400 }}>
             {({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
           </Dialog>
         </Modal>

src/app/(main)/settings/teams/[teamId]/TeamMemberEditButton.tsx

@@ -34,7 +34,7 @@ export function TeamMemberEditButton({
         </Row>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.editMember)}>
+        <Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
           {({ close }) => (
             <TeamMemberEditForm
               teamId={teamId}

src/app/(main)/settings/teams/[teamId]/TeamMemberEditForm.tsx

@@ -39,7 +39,7 @@ export function TeamMemberEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ role }} style={{ minWidth: 400 }}>
+    <Form onSubmit={handleSubmit} error={error} defaultValues={{ role }}>
       <FormField
         name="role"
         rules={{ required: formatMessage(labels.required) }}

src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx

@@ -41,11 +41,11 @@ export function TeamMemberRemoveButton({
         </Icon>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.removeMember)}>
+        <Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
           {({ close }) => (
             <ConfirmationForm
               message={formatMessage(messages.confirmRemove, {
-                target: <b key={messages.confirmRemove.id}>{userName}</b>,
+                target: userName,
               })}
               isLoading={isPending}
               error={error}