fix: anchor extension badges inside signed-section, not the viewport#3
Merged
Merged
Conversation
The site wraps only the article body in <signed-section> (it opens after the page <h1> and closes before </article>), so the wrap is already correct. But the browser extension positions its verification badge with `position: absolute; top: -10px; right: 10px;` relative to the nearest positioned ancestor. The <signed-section> only had `style="display: block;"` inline, so the badge bubbled up the ancestor tree to the viewport — appearing 10px below the top of the *document*, off-screen once the user scrolled into the article. Overrides the htmltrust-hugo module's partial to add `position: relative;` to the inline style on the emitted <signed-section>. With that, the absolutely-positioned badge anchors to the top-right of the signed article body, where it's actually visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The symptom
Extension verification badges appeared off-screen, above the viewport's top edge, once the user scrolled into a content page.
Root cause
The site is already wrapping just the article body —
<signed-section>opens after the page<h1>and closes before</article>. That part is fine.But the htmltrust-hugo module's partial emits the element with only
style=\"display: block;\"inline. The extension positions its badge withposition: absolute; top: -10px; right: 10px;, so the badge anchors to the nearest positioned ancestor — and since none of<signed-section>,<article>, or the page wrappers havepositionset, the badge bubbles up to the viewport. That puts it 10px below the document top, which is above the visible viewport whenever the user has scrolled.Fix
Local override of
layouts/_partials/htmltrust-signed-section.htmlthat addsposition: relative;to the inline style:Now the badge anchors to the top-right of the actual signed article body, where it's visible.
Verify
After this lands and Cloudflare redeploys, install the browser extension and scroll the spec page — badge should appear at the top-right of the article body.
🤖 Generated with Claude Code