The X of a dialog does not close it on small screens

[jaller94]

On the following screenshot every grey area does close this dialog except for the spot of the white X where uses would expect the action.

Expected behaviour

Let this dialog be closable by clicking on the grey area as well as the white X.

Code in question

@media(max-width:60rem) {
    [role=dialog] [role=contentinfo]:before {
        right:1em;
    }
}

/apps/contacts/stylesheets/app.css:1498

Cozy platform

Data System: 2.5.12

Proxy: 2.5.14

Home: 2.5.19

Controller: 2.5.10

Contacts App: 2.1.11

Browser

Browser: Firefox 45.1.1