Fix unpredictable behaviors of elements in production

[waleed-alfaifi]

This is a very annoying problem, apparently with ChakraUI, that occurs only in production. I have seen it in many situations but it is all unpredictable. I have attached some examples of this problem below.

Situation 1

In this case, the navigation links should be to the rightmost, and if you refresh the page or move to another page they will move to the right position.
A solution might be to just change the way these items are stacked (I am using flex with margin-right: auto now.)

Situation 2

Update 04/03/2021 | The height problem is solved by using CSS instead of JS for the media queries (thank you CSS, God forgive you troublesome JS 🙂.) The button problem is still not resolved yet.

When you visit a post (directly from its link and not from home page) you find these different styling for both the copy to clipboard button and the media content. The copy to clipboard button should have the same background color as the others. The media content should be 500px high on large screens and not 200px as in mobile devices.

P.S. These unpredictable behaviors are driving me crazy 🙂. It might be our fault (coding wise), ChakraUI's problem or Gatsby's! In all cases, we should try to fix these issues before going live.

[mzaien]

Hi @waleed-alfaifi i have knew the reason for share buttons to beehive like that it was the react-share buttons above them the chakra styling is not applicable for that so i used chakra factory and it is like magic check the coming commit

[mzaien]

Look what we got @waleed-alfaifi chakra-ui/chakra-ui#3124

[waleed-alfaifi]

Wow, interesting that it's a common problem. Thank you for sharing.
SSR sure comes with its problems.. why did we use SSR anyway 😅. Inshallah I will never use ChakraUI with Gatsby again.. sorry @mzaien 😁.