@mattab opened this Issue on January 28th 2021 Member

the "Compare to" button design has slightly regressed on firefox only (seems ok on chrome)?
here is how it looks on cloud and demo2 on FF:

Screenshot from 2021-01-29 11-06-25

but it used to look like https://matomo.org/wp-content/uploads/2019/10/Screenshot-from-2019-10-29-17-26-12.png

Would be great to restore the look. (as the calendar is very often used)

@sgiehl commented on January 29th 2021 Member

That actually looks fine for me locally and on demo2 using Firefox on Windows.
But to be honest the current layout isn't good at all, as it won't work for various languages besides of English, as Compare to: has longer translations. For German it's Vergleichen mit:, which is always too long and the layout "breaks"

@flamisz commented on March 16th 2021 Contributor

I see what's happening here. The calendar itself positioned absolutely, without any width, so it uses the parent's width (which is too small, so grows to fit the period). If we see in smaller screen (<600px) actually it looks good (see screenshot), because we changing the positions above the calendar, so under 600px the parent element will be the whole top_controls class.

Easy fix is too set a fix width to the calendar (of course be careful with the mobile view and max-width).

Screen Shot 2021-03-16 at 3 28 30 PM
This Issue was closed on April 7th 2021
Powered by GitHub Issue Mirror