fix(components): drop stale backdrop offset in bookshop examples#1999
Merged
Conversation
The example-bookshop shortcode padded the preview section and passed a matching set of negative margins to the backdrop image via bg_class. That compensation was only correct while the image was laid out from its static position, inside the section content box. mod-blocks now pins the backdrop with inset: 0, so the image already covers the padding box. The negative margins shifted it out of the section, leaving a gap on the opposite edge. Remove them and let the section argument pass through untouched. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bump mod-blocks to v1.23.6, which anchors a section backdrop to its own section whenever a backdrop is defined, instead of only when an overlay mode is set (gethinode/mod-blocks#143). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
markdumay
force-pushed
the
fix/example-backdrop-margins
branch
from
0e958d7 to
37ab7a7
Compare
✅ Deploy Preview for gethinode-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Collaborator
Author
|
🎉 This PR is included in version 2.19.2 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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.
Fixes the hero-with-backdrop preview on the Hero docs page, and pulls in the companion mod-blocks release.
Problem
The backdrop image in the preview rendered 24px up and to the left of its section, leaving a matching gap on the bottom and right edges.
The
example-bookshopshortcode pads the preview section (p-1 px-md-4 py-md-4) and passed the exact negative counterpart to the backdrop image viabg_class(m-n1 mx-md-n4 my-md-n4). That compensation was only correct while the image was laid out from its static position, at the section's content-box origin.mod-blocks v1.23.5 (gethinode/mod-blocks#142) pins the backdrop with
inset: 0, so the image now covers the section's padding box by construction. The negative margins became stale and displaced it.Changes
bg_classnegative margins fromexample-bookshop.html. The section padding stays; the backdrop covers the section without compensation, and an author-specifiedbg-classin an example's YAML is now honoured instead of being overwritten.backdropwithoverlay-mode: nonehad no positioned ancestor and its image escaped to<body>.Verification
Backdrop geometry in the preview, measured in the browser before and after:
A production build of the exampleSite on v1.23.6 confirms the backdrop section renders as
hero … backdrop-container background-container, nom-n1margins remain on the page, and the.backdrop-container/.background-container/.background-img-fluidrules all survive PurgeCSS.hero.mdis the only docs page usingbackdrop, so this is the only preview affected.🤖 Generated with Claude Code