diff --git a/src/common/components/forms/FormInputKey.tsx b/src/common/components/forms/FormInputKey.tsx index e19a2b450..39516ac3a 100644 --- a/src/common/components/forms/FormInputKey.tsx +++ b/src/common/components/forms/FormInputKey.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Box, FormControl, FormHelperText, FormLabel, IconButton, Input } from '@mui/joy'; +import { Box, FormControl, FormHelperText, FormLabel, IconButton, Input, InputSlotsAndSlotProps } from '@mui/joy'; import KeyIcon from '@mui/icons-material/Key'; import VisibilityIcon from '@mui/icons-material/Visibility'; import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; @@ -9,6 +9,15 @@ import { getIsMobile } from '~/common/components/useMatchMedia'; import { TooltipOutlined } from '~/common/components/TooltipOutlined'; +const slotPropsInputSx: InputSlotsAndSlotProps['slotProps'] = { + input: { + sx: { + width: '100%', + } + } +} as const; + + export function FormInputKey(props: { autoCompleteId: string, // introduced to avoid clashes label?: string, rightLabel?: string | React.JSX.Element, @@ -71,6 +80,7 @@ export function FormInputKey(props: { error={props.isError} startDecorator={!props.noKey && } endDecorator={endDecorator} + slotProps={slotPropsInputSx} />