Skip to content

fix(docs-infra): center copy button in code block header#69638

Open
erkamyaman wants to merge 1 commit into
angular:mainfrom
erkamyaman:fix-docs-infra-center-code-copy-button
Open

fix(docs-infra): center copy button in code block header#69638
erkamyaman wants to merge 1 commit into
angular:mainfrom
erkamyaman:fix-docs-infra-center-code-copy-button

Conversation

@erkamyaman

@erkamyaman erkamyaman commented Jul 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

The copy button in code block headers was misaligned, and the offset
differed between header variants because the headers were not the same
height. The filename (h3) header and the shorter prefer/avoid style
header rendered at different heights, so a single top value could not
center the button in both.

Give every .docs-code-header a shared min-height (with box-sizing: border-box so the padding is not double-counted) and vertically center
its contents, so all header variants render at the same height. The copy
button's top is then a single value that centers it against every
header.

PR Checklist

Please check that your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other

What is the current behavior?

image

What is the new behavior?

image

Does this PR introduce a breaking change?

  • Yes
  • No

@pullapprove pullapprove Bot requested a review from atscott July 3, 2026 19:16
@angular-robot angular-robot Bot added the area: docs-infra Angular.dev application and infrastructure label Jul 3, 2026
@ngbot ngbot Bot added this to the Backlog milestone Jul 3, 2026
@erkamyaman

erkamyaman commented Jul 3, 2026

Copy link
Copy Markdown
Contributor Author

It can be spotted here https://angular.dev/guide/directives/attribute-directives#building-an-attribute-directive

@JeanMeche JeanMeche requested review from JeanMeche and removed request for atscott July 3, 2026 19:16
@github-actions

github-actions Bot commented Jul 3, 2026

Copy link
Copy Markdown

Deployed adev-preview for dd67626 to: https://ng-dev-previews-fw--pr-angular-angular-69638-adev-prev-kvmcaffj.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@erkamyaman erkamyaman marked this pull request as draft July 3, 2026 19:54
@erkamyaman

erkamyaman commented Jul 3, 2026

Copy link
Copy Markdown
Contributor Author

I had to draft it because I also noticed this
image ( same page )

#69030 also introduced this issue, fixing it all well together. Once it is done I will make the pr ready for review.

@erkamyaman erkamyaman force-pushed the fix-docs-infra-center-code-copy-button branch from dd67626 to 5c2abc0 Compare July 3, 2026 20:18
@erkamyaman
fix(docs-infra): center copy button in code block header
c31d5c9 
The copy button in code block headers was misaligned, and the offset
differed between header variants because the headers were not the same
height. The filename (`h3`) header and the shorter prefer/avoid style
header rendered at different heights, so a single `top` value could not
center the button in both.

Give every `.docs-code-header` a shared `min-height` (with `box-sizing:
border-box` so the padding is not double-counted) and vertically center
its contents, so all header variants render at the same height. The copy
button's `top` is then a single value that centers it against every
header.
@erkamyaman erkamyaman force-pushed the fix-docs-infra-center-code-copy-button branch from 5c2abc0 to c31d5c9 Compare July 3, 2026 20:20
@erkamyaman

erkamyaman commented Jul 3, 2026

Copy link
Copy Markdown
Contributor Author

The copy button was sitting a bit low, and how far off depended on the header type. Turns out #69030 put the button in the header with one hardcoded top, but filename headers and prefer/avoid headers aren't the same height, so no single value centers both.

I just made all headers the same height to fix the issue, because otherwise a single top value can't center the button in both the filename and prefer/avoid headers (they render at different heights), so it'd always look right on one and off on the other. Same height means one value centers it everywhere, no per-variant fixes.

Now one top centers the button everywhere. Checked filename, avoid, prefer, and combined headers, all line up and non-header blocks are untouched.

It can be spotted in https://angular.dev/guide/di/debugging-and-troubleshooting-di

Before:
image

image image image

After:
image

image image image

@erkamyaman erkamyaman marked this pull request as ready for review July 3, 2026 20:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JeanMeche JeanMeche Awaiting requested review from JeanMeche

Assignees

No one assigned

Labels

adev: preview area: docs-infra Angular.dev application and infrastructure

Projects

None yet

Milestone

Backlog

Development

Successfully merging this pull request may close these issues.

2 participants

@erkamyaman @JeanMeche