From 48328c0e9400b5dbed6a1edca030f0f54d522e50 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Sun, 26 Apr 2026 01:32:00 -0400 Subject: [PATCH] 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 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx index fd49fcdf2..bfcbfa181 100644 --- a/client/src/Components/inputs/TextInput.tsx +++ b/client/src/Components/inputs/TextInput.tsx @@ -26,6 +26,7 @@ export const TextInput = forwardRef(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(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", }, }}