React-calendar: Broken layout in Safari mobile

[lisahoong]

On a desktop browser this calendar appears just fine, but when I view this on my iPhone 7 in my Safari app, the last weekday's dates get pushed to the next line like this:

[wojtekmaj]

Hey Lisa,
I need a little more information to help you. Is the same issue happening when you open the following pages?

1. Demo page
2. Test page

[PiTomar]

Hi,
in IE11 there is a similar issue:

[lisahoong]

On the demo page, it looks like this:

On the test page, it looks like this:

Thank you for your help!

[wojtekmaj]

@lisahoong, it looks like tile elements have some additional margin or a border, which is not standard button styling. I sadly have no Safari. Would you please try using this CSS and tell me if it works for you? If it does, I'll push the fix.

.react-calendar__tile {
  margin: 0;
  border: 0;
}

@PiTomar, thanks for mentioning it - I could reproduce this, indeed IE fails to scale flex items properly.

[nathan-haines]

@wojtekmaj Is that fix for IE in already? Just trying to figure out if the issue is on my end now haha

[wojtekmaj]

@nathan-haines, it has landed on master branch; now I just need info from Lisa if the other part of the fix had worked :) I'd rather push an entire fix.

For those interested - Internet Explorer seems to be ignoring box-sizing: border-box property when in flex boxes. Tiles are measured to have exactly 100% / 7 width, but Internet Explorer measures them and THEN applies the padding which makes the tiles larger. max-width: 100% / 7 does the trick.

[brettshumaker]

@wojtekmaj Adding margin:0 to .react-calendar_tile fixes the issue for me in safari (iOS and desktop)

[lisahoong]

Thank you so much!!

[wojtekmaj]

My pleasure :)