fix: scope image box grid layout to direct content wrapper only

[Arukuen]

fixes #3702

This fix also covers other affected stackable blocks with side-by-side layout (columns blocks, etc.). The grid layout enforced by image box should only be applied to the content wrapper.

Summary by CodeRabbit

• Style
  • Refined image box component layout to improve content alignment consistency across the interface.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4bcf9ab4-c33d-46a3-a4ee-74b4fccbd347

📥 Commits

Reviewing files that changed from the base of the PR and between 2438d9e and a5e2a39.

📒 Files selected for processing (1)

• src/block/image-box/style.scss

---

📝 Walkthrough

Walkthrough

The PR adds a nested CSS selector to the Image Box block stylesheet to address button overlap when Button groups are placed inside an Image Box. A direct-child selector targets the content area and applies layout alignment styling.

Changes

Image Box Layout Alignment

Layer / File(s)	Summary
Image Box Content Layout Selector src/block/image-box/style.scss	Direct-child selector > .stk-block-image-box__content added to apply grid-based layout alignment, preventing button overlap within the content area.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A single line, so neat and clean,
Fixes buttons that obscene—
No more overlap, no more pain,
Image boxes centered again! 🎀

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: scoping image box grid layout to direct content wrapper, which fixes the button overlap issue.
Linked Issues check	✅ Passed	The CSS change addresses the root cause of button overlap by scoping grid layout to direct child content wrapper, directly resolving issue #3702.
Out of Scope Changes check	✅ Passed	The SCSS change is directly scoped to fixing the image box grid layout issue and contains no out-of-scope modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/3702-image-box-overlap

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3706-stackable-3706-merge.zip	a5e2a39

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3706-stackable-3706-merge.zip"}}]}