Red error border incorrectly sized inside Input.email

[MartinSStewart]

Firefox tries to be helpful by showing a red border around an email field if the user has entered something that isn't a valid email. This red border doesn't match the size of the email field though.

Here's a SSCCE:

module Main exposing (main)

import Element
import Element.Input as Input
import Html

type Msg
    = NoOp

main : Html.Html Msg
main =
    Element.layout
        []
        (Input.email []
            { onChange = always NoOp
            , label = Input.labelHidden ""
            , placeholder = Nothing
            , text = ""
            }
        )

The same code but on Ellie: https://ellie-app.com/6NStPkq6556a1

Versions

• OS: MacOS
• Browser: Firefox
• Browser Version: 69.0.1
• Elm Version: 0.19
• Elm UI Version: 1.1.5

[alexkorban]

#unexpected