fix(CopyPageButton): prevent position flash on page reload

[swastik7805]

Description

Fix CopyPageButton flashing at the wrong position (top-left) for a split second
on page reload before moving to its correct position (top-right of H1).

The button was briefly visible in its default DOM position before useEffect could
move it into the .h1Wrapper. Fixed by hiding the button with visibility:hidden by
default, and only showing it via visibility:visible when it's inside .h1Wrapper
— ensuring it's never visible until it's already in the correct position.

Issue(s) fixed

Fixes #2811

Preview

CopyButtonFlash-preview.mp4

Checklist

• If this PR updates or adds documentation content that changes or adds technical meaning, it has received an approval from an engineer or DevRel from the relevant team.
• If this PR updates or adds documentation content, it has received an approval from a technical writer.

External contributor checklist

• I've read the contribution guidelines.
• I've created a new issue (or assigned myself to an existing issue) describing what this PR addresses.

@alexandratran please review the PR.

---

Note

Low Risk
Low risk CSS/markup tweak that only affects CopyPageButton visibility and positioning; potential risk is the button staying hidden if wrapper/standalone styling isn’t applied as expected.

Overview
Prevents CopyPageButton from briefly rendering in the wrong (default) position on page reload by making the container visibility: hidden by default.

The button is now only made visible when rendered inside .h1Wrapper, or when the standalone prop is set (via an added conditional styles.standalone class).

^{Reviewed by Cursor Bugbot for commit e42c67c. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

@swastik7805 is attempting to deploy a commit to the Consensys Team on Vercel.

A member of the Team first needs to authorize it.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Reviewed by Cursor Bugbot for commit 984abfd. Configure here.}

[swastik7805]

Visibilty property addition on CopyButton css fixes the issue
@alexandratran @AyushBherwani1998 review my PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
metamask-docs	Ready	Preview, Comment	Apr 7, 2026 4:41pm

[alexandratran]

The copy button is missing from the tutorials with this update.

[swastik7805]

The copy button is missing from the tutorials with this update.

Hi @alexandratran ,thanks for pointing out that bug.
I have solved that issue by implementing a .standalone class that is applied when the button is rendered on tutorial pages that uses mdx. This allows the button to be immediately visible in its fixed position on tutorials, while still maintaining the "hidden-until-moved" logic for standard documentation pages (preventing the flash).

Hi @yashovardhan @AyushBherwani1998 could u please take a moment and review my PR. Thanks

[yatendra2342-png]

Hc__