fix(client): keep Chrome autofill background within the rounded input

The autofill inset shadow was bleeding past the rounded corners. Clip it via overflow: hidden on the outlined input root and bump the override rules to !important so they beat Chrome's user-agent styles.

client/src/Components/inputs/TextInput.tsx

@@ -26,6 +26,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 					borderRadius: theme.shape.borderRadius,
 					height: 34,
 					fontSize: typographyLevels.base,
+					overflow: "hidden",
 				},
 				"& .MuiOutlinedInput-notchedOutline": {
 					borderColor: theme.palette.divider,
@@ -40,10 +41,9 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 				},
 				"& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active":
 					{
-						WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.paper} inset`,
-						WebkitTextFillColor: theme.palette.text.primary,
+						WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`,
+						WebkitTextFillColor: `${theme.palette.text.primary} !important`,
 						caretColor: theme.palette.text.primary,
-						borderRadius: theme.shape.borderRadius,
 						transition: "background-color 5000s ease-in-out 0s",
 					},
 			}}