Toggle word wrap and Copy buttons in code examples almost invisible

[rakleed]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Toggle word wrap and Copy buttons in code examples are almost invisible.

Reproducible demo

https://github.com/facebook/docusaurus/tree/main/website

Steps to reproduce

1. Open https://docusaurus.io/docs/typescript-support#setup
2. Change window size, so the code example doesn't fit on one line
3. Hover on code example

Expected behavior

Toggle word wrap and Copy buttons in code examples should have an opaque background.

Actual behavior

Toggle word wrap and Copy buttons in code examples have a semi-transparent background and merge with the text.

Your environment

• Public source code: https://github.com/facebook/docusaurus/tree/main/website
• Public site URL: https://docusaurus.io/
• Docusaurus version used: 3.7.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 131
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 15.2

Self-service

• I'd be willing to fix this bug myself.

[slorber]

Thanks

Agree it's not great but I wonder if it would be better with a fully opaque background. I'd say it's a bit better yes.

Do you have examples of other docs doing this properly?

---

Looks like other docs sites like Starlight are also affected, although their background is a bit more opaque than ours:

https://starlight.astro.build/guides/css-and-tailwind/

---

VitePress is using an opaque background:
https://vitepress.dev/guide/routing#linking-to-non-vitepress-pages

(can't screenshot while hovering 😅 it's already fading out)

---

Nextra has the same problem:
https://nextra.site/docs/docs-theme/start

---

Material for MkDocs has the same problem:

https://squidfunk.github.io/mkdocs-material/getting-started/

---

There's also this related @Roiocam PR (waiting for my review 😅) suggesting moving buttons to the title when possible: #10461

[rakleed]

If such an edge case is not considered in other tools, it shouldn't be ignored in Docusaurus.

Well, PR #10461 does not solve the problem if there is nowhere to move the buttons (as in my screenshot).

It seems to me that the correct solution would be to always use opacity: 1 for buttons. And at the same time, you can add an additional indent to the right of the text equal to the width of the buttons, so that even when the buttons are displayed, it is possible to read the text in full.