align signon username/password boxes

interface/src/SignIn.tsx

@@ -102,23 +102,27 @@ const SignIn = memo(() => {
           width: '100%'
         })}
       >
-        <Typography variant="h4">{PROJECT_NAME}</Typography>
-
+        <Typography mb={1} variant="h4">
+          {PROJECT_NAME}
+        </Typography>
         <LanguageSelector />
-
-        <Box display="flex" flexDirection="column" alignItems="center">
+        <Box
+          mt={1}
+          display="flex"
+          flexDirection="column"
+          gap={1}
+          alignItems="center"
+        >
           <ValidatedTextField
             fieldErrors={fieldErrors || {}}
             disabled={processing}
             sx={{
-              width: 240
+              width: '32ch'
             }}
             name="username"
             label={LL.USERNAME(0)}
             value={signInRequest.username}
             onChange={updateLoginRequestValue}
-            margin="normal"
-            variant="outlined"
             slotProps={{
               input: {
                 autoCapitalize: 'none',
@@ -130,14 +134,13 @@ const SignIn = memo(() => {
             fieldErrors={fieldErrors || {}}
             disabled={processing}
             sx={{
-              width: 240
+              width: '32ch'
             }}
             name="password"
             label={LL.PASSWORD()}
             value={signInRequest.password}
             onChange={updateLoginRequestValue}
             onKeyDown={submitOnEnter}
-            variant="outlined"
           />
         </Box>
 

interface/src/components/inputs/ValidatedTextField.tsx

@@ -15,6 +15,7 @@ export type ValidatedTextFieldProps = ValidatedFieldProps & TextFieldProps;
 
 const ValidatedTextField: FC<ValidatedTextFieldProps> = ({
   fieldErrors,
+  sx,
   ...rest
 }) => {
   const errors = fieldErrors?.[rest.name];
@@ -28,7 +29,8 @@ const ValidatedTextField: FC<ValidatedTextFieldProps> = ({
         sx={{
           '& .MuiInputBase-input.Mui-disabled': {
             WebkitTextFillColor: 'grey'
-          }
+          },
+          ...(sx || {})
         }}
         {...(rest.disabled && {
           slotProps: {