Skip to content

fix(copy-page): right-align Copy page button on pages without a TOC#5161

Merged
Simek merged 3 commits into
react:mainfrom
azizbecha:fix/copy-page-button-alignment
Jun 28, 2026
Merged

fix(copy-page): right-align Copy page button on pages without a TOC#5161
Simek merged 3 commits into
react:mainfrom
azizbecha:fix/copy-page-button-alignment

Conversation

@azizbecha

Copy link
Copy Markdown
Contributor

Fixes #5160.

Summary

On doc pages without a table of contents (e.g. hide_table_of_contents: true), the "Copy page" button appeared at the top-left (above the title) instead of the top-right.

The in-article button is rendered in .docHeaderContainer — a flex row with justify-content: space-between — next to <DocVersionBadge />. On the current/latest release the stock DocVersionBadge renders nothing, so the container is left with a single flex child, which space-between pins to flex-start (the left). In addition, .copyPageArticleAction was referenced via styles.copyPageArticleAction in the component but never defined in styles.module.css, so in the no-TOC case the wrapper had no class to right-align it.

Fix

Define the class with margin-left: auto:

.copyPageArticleAction {
  margin-left: auto;
}

margin-left: auto pushes the button to the right edge whether it is the only child (no version badge) or sharing the row with the badge (badge stays left, button right). When a TOC is present the article button is display: none on desktop and the aside button is used instead, so that path is unaffected.

Test plan

  • prettier --check passes on the changed file.
  • Visual before/after below.

Screenshots

Before:
Image

After:

Image

The in-article Copy page button sits in `.docHeaderContainer` (a flex row
with `justify-content: space-between`) next to `<DocVersionBadge />`. On the
current release `DocVersionBadge` renders nothing, leaving a single flex
child that space-between pins to the left. `.copyPageArticleAction` was
referenced in the component but never defined in the CSS module, so the
no-TOC wrapper had no class to right-align it.

Define `.copyPageArticleAction` with `margin-left: auto` so the button stays
right-aligned whether or not the version badge renders.
@meta-cla meta-cla Bot added the CLA Signed label Jun 28, 2026
Comment thread website/src/theme/DocItem/Layout/styles.module.css Outdated
Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

@Simek Simek left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@azizbecha

Copy link
Copy Markdown
Contributor Author

Thanks @Simek for the review!

@Simek Simek merged commit ca2ee3f into react:main Jun 28, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"Copy page" button is left-aligned on pages without a table of contents

2 participants