ProtonMail / proton-contacts

React web application to manage ProtonMail contacts
54 stars 19 forks source link

Fixes to the contacts list view #374

Closed matstaz closed 3 years ago

matstaz commented 4 years ago

We need to make the background color white We weed to reduce the height from 60 pixels to 55 pixels to be as close as possible to Mail list view

Screenshot attached

Capture d’écran 2019-12-30 à 16 01 35
mmso commented 4 years ago

This is patched and deployed but we probably need to re-think the patch

Swiip commented 4 years ago

A note not to lose all the analyze.

The column container width is calculated in CSS then the Autosizer component refers to this container to size the items.

The calculated size is not an integer. Chrome seems to round fine. FF in the other end, render a thing (round up) and give to Autosizer different (round down). At the end, only on FF, the items are 1px shorter than the container.

In the middle of this, the container has a border right to mark the limit with the right column. If the size calculations are right, the item covers the border. It's why we add a width - 1 to the List component. But in FF, as the calculations are 1px wrong, the items are 1px too short. If you look really close, on a selected contact, there is a 1px line of white at the right.