Improve styling on narrow screens, particularly mobile

[gnsoria]

Hi! First off: thanks for this awesome tool!

I've been struggling with the appearance of the calendar on mobile lately, though these issues extend to narrow-width components on desktop as well. Here's an example from your storybook. As you can see, with enough data, the calendar is so small it's basically illegible (you can see the width/height params in the header):

If you have tooltips on the dates, good luck tapping the right one...

Compare that to how Github's activity calendar looks on the same screen size. The calendar is a legible size and is scrollable (the footer stays in place while you scroll):

I tried to replicate this behavior by wrapping my ActivityCalendar component in a div with various width and overflow settings, similar to Github's calendar wrapper, but I was unable to get mine to resize properly. It either overflowed the page or wouldn't get bigger like I expected.

Ideally, I'd be able to adjust the size of the parent and have the calendar size / scroll-ability adjust automatically, but I'd be happy settling for a minimum-size with always-scrollable behavior like on Github.

Happy to give more information about what I tried or about my use cases. Thanks again!

[grubersjoe]

Hey. Thanks the feedback, I think this a good idea 👍. Implemented in ce6b191bff89b8bcd4106a431e21f0499937d7ec and released in v2.1. Here's also a demo in the Storybook.

[gnsoria]

@grubersjoe I appreciate you hopping on this so quickly! The Storybook link didn't work for me so I just pulled that version down and played around with it on my local. I spotted two things

• If the parent container is display: flex;, the calendar overflows (in the screenshot, the lighter blue background is the containing parent)

• The name of the most recent month gets cut off for me. It looks like Github doesn't even show that month (second screenshot)

Happy to make separate tickets for those if that's easier for your bookkeeping.

Thanks again!

[Teddy-van-Jerry]

Hi, thank you for the update. It seems the new version does not look good on Safari (therefore all iOS devices), it is very narrow for the calendar (a fixed width of 300px):

This also broke react-github-calendar, which now looks like this on Safari:

[!NOTE] My Safari version: Version 17.0 (19616.1.27.211.1)

[grubersjoe]

Sorry people, should've tested this better before releasing. I'll look into this on Sunday. Use the previous version until then please.

[grubersjoe]

Thanks for the feedback again. I think all the issues should be resolved now:

1. parent flex containers work now, I've readded max-width: 100% to the calendar container
2. the last month label will not be shown if there is not "enough" data now, that is there are not at least three weeks with data for that month (it's a naive implementation, but should be good enough for most cases)
3. the incorrect scaling on Safari is fixed @Teddy-van-Jerry

Released in react-activity-calendar@2.1.7 and react-github-calendar@4.0.5.

[grubersjoe]

I noticed one more issue: weekday labels are rendered outside the calendar container to the left and cut off now. This also needs to be handled somehow.

Edit: fixed in react-activity-calendar@2.1.8

[gnsoria]

Thank you for getting this done so fast!

A note for future travelers: I noticed on mobile that the calendar starts on the earliest date (i.e. on the left side); this is how GitHub's calendar works too. If you're wanting it to instead start on the most recent date (i.e. on the right side), you can add an override of the direction style on the scroll container:

/* Switch the calendar to start scrolled to the right (i.e. showing the most recent dates */
.react-activity-calendar__scroll-container {
    direction: rtl;
}

/* Reverts scroll direction for all children of the scroll container */
.react-activity-calendar__scroll-container * {
    direction: initial;
}