fix(docs-infra): avoid copy button overlap in code blocks#69030
Conversation
angular-robot
Bot
added
the
area: docs-infra
|
Follow this #68537 (comment) |
|
Thanks for pointing me back to that direction. I pushed a follow-up that now reveals the copy button on hover/focus instead of keeping it always visible. The update keeps keyboard access intact with :focus-within / :focus-visible, keeps success/failure states visible after activation, and applies the same behavior to example-viewer code panes as well as regular docs-code blocks. Checks run: px --yes [email protected] --check adev/shared-docs/styles/docs/_code.scsspx --yes [email protected] --no-source-map adev/shared-docs/styles/docs/_code.scss
The local pre-commit hook warned that the |
|
Apologies, the hover/focus follow-up was not on this PR branch earlier. It is now pushed in 95efab6. Reran the targeted checks:
|
|
Deployed adev-preview for bf7d9a6 to: https://ng-dev-previews-fw--pr-angular-angular-69030-adev-prev-8q9h6hjw.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
Reveal code copy controls on hover and focus so long code snippets stay readable while keyboard access and copy state feedback remain intact.
KirtiRamchandani
force-pushed
the
fix/docs-code-copy-overlap
branch
from
95efab6 to
bf7d9a6
Compare
|
Fixed the lint failure by rewriting the branch to a single commit with a valid Angular commit-message body (�f7d9a6198). Local check: git diff --check HEAD~1..HEAD passes. Waiting for CI to rerun. |
JeanMeche
added
action: merge
The "Prefer" / "Avoid" code block headers rendered the style label as plain inline text joined to the title with a bare "-" separator, giving the two block types little visual distinction. The taller label also left the prefer/avoid header at a different height from the plain filename header, so the copy button's single "top" value could not center it in both. Style the label as a small uppercased pill tinted with the block's style color, drop the "-" separator, add a subtle inset accent under the header, and swap the heavier "dangerous" icon on "Avoid" for "close". Give every header a fixed height with box-sizing: border-box and vertically center its contents so all variants render at the same height and the copy button stays centered. This supersedes angular#69638, folding in its centering fix for the copy button offset that angular#69030 introduced.
4 participants
Problem
Code-block copy buttons on angular.dev are absolutely positioned over the scrollable code area. On narrow screens or horizontally scrollable examples, the button can cover source text.
Root cause
For code blocks with headers, the button is still positioned below the header, inside the code body, so horizontal scrolling can move code underneath the fixed button.
Solution
Move copy buttons for headered code blocks into the header area and reserve inline space in the header so the button does not overlap header text or code content.
Fixes #68534.
Tests
npx --yes [email protected] --check adev/shared-docs/styles/docs/_code.scssnpx --yes [email protected] --no-source-map adev/shared-docs/styles/docs/_code.scssgit diff --check