Debug broken anchor

[rachelwhitton]

Fixes #9490
Replaces #9502

Debug broken anchors across traffic intro page, for example:

https://docs.pantheon.io/guides/account-mgmt/traffic#what-about-denial-of-service-and-other-attacks

---

Bug

The presence of a Popover component caused other elements to render incorrectly, wrapping them inside a div with pds-popover classes.

Fix

Ensured Popover only renders on the client side using useState and useEffect, preventing issues during server-side rendering (SSR).

[pantheon-decoupled]

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-9494-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

[pantheon-decoupled]

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-9494-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

[rachelwhitton]

When you refresh the page, the note under the first FAQ is styled correctly for a flash but then goes away

Screen.Recording.2025-03-19.at.1.52.27.PM.mov

The following anchors do not link to the correct header section:

• How long do you keep the data? links to #cache-hit-ratio
• What traffic is excluded from Pantheon's metrics? links to #counted-visits
• What about redirects? links to #uncounted-visits
• What about Denial of Service and other attacks? links to #why-doesnt-pantheons-traffic-metrics-match-my-other-analytics

Since all the impacted headers appear after the unstyled note mentioned at the top of this comment, I'm wondering if the issues are related? I'm not able to reproduce the issues running gatsby locally but I do see it on production and preview environments in multiple browsers

@mel-miller this issues was present before our latest PDS toolkit updates but it may be a design issue, could you take a look?

[pantheon-decoupled]

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-9494-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

[rachelwhitton]

Cherry picked solution from separate PR (that we're closing as a dupe) into this PR

Tested anchors and popups - looks great! thank you so much @gfbollingerHakuna!!