umami icon indicating copy to clipboard operation
umami copied to clipboard

fix(ui): correct login autofill background alignment (#3759)

Open negativ14 opened this issue 1 month ago • 2 comments

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)

Screenshot 2025-11-18 at 4 30 11 PM

https://github.com/user-attachments/assets/159fd82e-cb7f-48dc-824b-a52641d9cc57

How to Test

  1. Open /login
  2. Trigger autofill for email/password
  3. Confirm background color is now uniform
  4. 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 avatar Nov 18 '25 11:11 negativ14

@negativ14 is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Nov 18 '25 11:11 vercel[bot]

Greptile Summary

  • Fixed autofill background color misalignment on login page by adding webkit-specific CSS overrides
  • Removed empty dist section from pnpm-lock.yaml for 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"

greptile-apps[bot] avatar Nov 18 '25 11:11 greptile-apps[bot]