Calendar thinks it's in mobile when initially server side rendering

[coffenbacher]

So the layout flips out a bit for a second on desktop until client-side React can reconcile it

[goto-bus-stop]

Hmmyeah. It's always going to either be wrong on mobile by default, or on desktop, with how it's currently done. Since the DOM is different between mobile and desktop. I think to remove the jump entirely, it'd have to only use CSS media queries to differ between the layouts

[coffenbacher]

It would never be 100% accurate, but I'm pretty sure parsing the useragent when it's rendering server-side would work for the vast majority of cases, haven't looked to see if/how that's possible yet with how it's setup though

[goto-bus-stop]

True. Could use https://www.npmjs.com/package/device, I think, in a getInitialProps() method:

import device from 'device'

getInitialProps ({ req }) {
  return { isMobileAgent: req && device(req.userAgent).is('mobile') }
}

and then in the <Media /> callback in https://github.com/coffenbacher/calendar/blob/master/components/MatchList.js, check for both the Media parameter and the isMobileAgent prop.

<Media query={mobileBreakpoint}>
  { matches => if (matches || isMobileAgent) ... }
</Media>

I can give this a shot later tonight i think

[coffenbacher]

Awesome! That looks promising indeed. I am working on #4 at the moment so have at it if you want.