Wp-calypso: Themes: Sidebar overlapping when viewing themes

[markpernotto]

Steps to reproduce

1. Starting at URL: http://calypso.localhost:3000/themes/:site
2. Make sure screen is at least 660px in width
3. Remove the /:site from the URL manually in the address bar and hit enter

What I expected

I expected a similar screen to layout when the :site is specified in the URL

What happened instead

1. For a brief moment, while the page is still loading, I see this in the window:
   

2. After the page fully loads, I see this:
   
   It appears that the sidebar is overlapping the themes to be chosen, and the search bar is overlapping the sidebar.

Browser / OS version

Replicated in both Google Chrome and Firefox

Context / Source

I'm not 100% sure how you could reach this URL without manipulating the address bar, as there doesn't appear to be a menu item or link that will allow you to choose a new theme while no one theme is specified.

Originally reported by @simison in #20378, as an additional issue. @folletto recommended a separate ticket for this.

[rachelmcr]

Is it possible this is only an issue in local Calypso development? I couldn't reproduce it at https://wordpress.com/themes even when I slowed down my network considerably.

I'm not 100% sure how you could reach this URL without manipulating the address bar

I got here with these steps:

1. Visit this URL: https://wordpress.com/
2. Select "My Sites" (while logged in to an account with multiple sites).
3. Select "Switch Site" in the sidebar.
4. Select "All My Sites" in the sidebar.
5. Select "Themes."

I then did hard refreshes at different network speeds but couldn't reproduce the issue as described (testing on wordpress.com, not in Calypso local development).

[folletto]

Is it possible this is only an issue in local Calypso development?

Yes, I think it is.
I asked to open a separate issue so I can link this thread to a dev and ask to cross-check. :)

[ockham]

Yeah, we introduced that with the React 16 upgrade. Related to the old auth/cookies issue in dev, and made visible by a change in how React 16 reconciles server- vs client-rendered layouts 😕

Edit: To be clear: Confirmed, only in dev.

[markpernotto]

Thanks @rachelmcr @ockham @folletto

Should this ticket be closed, then?

[folletto]

It's something that should not be broken, but I think it's not trivial to fix. I'd close for now, it's still useful for this issue to exist so it's searchable for the future. :)