umami
umami copied to clipboard
fix(ui): correct login autofill background alignment (#3759)
What I Fixed
Resolved the issue where autofilled login input fields had mismatched background colors, causing an uneven visual appearance on the login page.
🎯Why This Fix Matters
The autofill background styling created a noticeable misalignment.
This fix ensures a uniform background for autofilled fields and maintains consistent
UI design.
Demo (Before/After)
https://github.com/user-attachments/assets/159fd82e-cb7f-48dc-824b-a52641d9cc57
How to Test
- Open
/login - Trigger autofill for email/password
- Confirm background color is now uniform
- Check that normal (non-autofill) inputs still look correct
Checklist
- [x] UI visually tested
- [x] Autofill behavior confirmed
- [x] No console warnings
- [x] Follows project coding style
- [x] Includes visual proof
@negativ14 is attempting to deploy a commit to the umami-software Team on Vercel.
A member of the Team first needs to authorize it.
Greptile Summary
- Fixed autofill background color misalignment on login page by adding webkit-specific CSS overrides
- Removed empty
distsection frompnpm-lock.yamlfor cleanup
Confidence Score: 5/5
- This PR is safe to merge with minimal risk
- Score reflects simple CSS styling fix with well-established webkit autofill pattern and harmless lock file cleanup
- No files require special attention
Sequence Diagram
sequenceDiagram
participant User
participant Browser
participant LoginForm
participant TextField
participant CSS
User->>Browser: "Navigate to /login"
Browser->>LoginForm: "Render login page"
LoginForm->>TextField: "Render username/password fields"
TextField->>Browser: "Display input fields"
User->>Browser: "Trigger autofill"
Browser->>TextField: "Apply -webkit-autofill pseudo-class"
TextField->>CSS: "Apply autofill styles from global.css"
CSS->>TextField: "Override background with --background-color"
TextField->>Browser: "Display uniform background"