Calypso sidebar overflow does not scroll

[jp-imagines]

Quick summary

The Calypso dashboard sidebar may overflow beyond the height of the current window. If so, scrolling down the screen should reveal the lower dashboard links. However, very inconsistently, the dashboard content itself does scroll but the sidebar menu does not.

Steps to reproduce

1. Start with a site using the Default interface (enabled at Settings > General).
2. Navigate around Calypso (or to and from Calypso and WP-Admin), particularly to Calypso areas with a lot of sub-links (e.g. Settings, Tools).
3. Scroll up and down the dashboard pages.

What you expected to happen

The sidebar should scroll as needed to reveal any overflow items.

What actually happened

In some cases, the sidebar does not scroll at all, making it impossible to view lower links:

Screen.Capture.on.2024-12-23.at.11-41-51.mp4

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

Refreshing the page seems to consistently fix the issue.

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Replicated only on Atomic so far, and only with the default interface. As this is very inconsistent, I'm unsure whether it affects Simple sites or the "classic" interface (and/or WP-Admin).

Initial user report here: 9194220-zd-a8c

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 9194220-zen

[madhusudhand]

Tried to reproduce this issue on atomic and simple sites. The reported issue not observed.
There could be site specific errors which might be breaking scrolling.

calypso-admin-sidebar-scroll.mp4

[jartes]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO
These are the steps that I followed to reproduce this.

First, you'll need two sites, one with the Classic style set (WP-Admin), and the other one with the Default style set. For simple sites, you'll need to use a smaller window size.

1. On /sites, click on the site with Classic style set, and go to WP-Admin.
2. Click on the WordPress.com logo (top-left corner) to return to /sites.
3. Click on the site with the Default style, and click on My Home.
4. Check the dashboard.

Video:

CleanShot.2024-12-31.at.12.46.38.mp4

📌 ACTIONS

• Triaged

📌 Message to Author
Thanks for reporting this one, @jp-imagines

👋🏻 @Automattic/t-rex or @Automattic/lego is this something you can review as your earliest opportunity? This came from a customer report.

@madhusudhand are you able to reproduce with the steps I shared?

Slack convo: p1735597464528799-slack-C0160HSMDQV

[madhusudhand]

@jartes Thanks for the steps. I was able to reproduce the issue. It is happening only when navigating from the sites dashboard. Not observed when the route is directly visited.

[madhusudhand]

👋🏻 @Automattic/t-rex or @Automattic/lego is this something you can review as your earliest opportunity? This came from a customer report.

Created #97884 to address this issue.