FormInputKey: fix min width on mobile

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 && <KeyIcon sx={{ fontSize: 'lg' }} />}
           endDecorator={endDecorator}
+          slotProps={slotPropsInputSx}
         />
       </>