Styling for all forms.

src/app/(main)/admin/users/UserAddButton.tsx

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

src/app/(main)/admin/users/UserDeleteButton.tsx

@@ -24,7 +24,7 @@ export function UserDeleteButton({
         <Text>{formatMessage(labels.delete)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.deleteUser)}>
+        <Dialog title={formatMessage(labels.deleteUser)} style={{ width: 400 }}>
           {({ close }) => (
             <UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
           )}

src/app/(main)/admin/users/[userId]/UserEditForm.tsx

@@ -45,7 +45,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={getMessage(error)} values={user} style={{ width: 300 }}>
+    <Form onSubmit={handleSubmit} error={getMessage(error)} values={user}>
       <FormField name="username" label={formatMessage(labels.username)}>
         <TextField data-test="input-username" />
       </FormField>

src/app/(main)/admin/users/[userId]/UserSettings.tsx

@@ -19,7 +19,7 @@ export function UserSettings({ userId }: { userId: string }) {
           <Tab id="details">{formatMessage(labels.details)}</Tab>
           <Tab id="websites">{formatMessage(labels.websites)}</Tab>
         </TabList>
-        <TabPanel id="details">
+        <TabPanel id="details" style={{ width: 500 }}>
           <UserEditForm userId={userId} />
         </TabPanel>
         <TabPanel id="websites">