fix: only add display grid to the direct child

[Arukuen]

fixes #3246

Summary by CodeRabbit

• Style
  • Updated image box component styling to use more precise selector patterns, ensuring styles are applied consistently to intended child elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Changed the CSS selector in .stk-block-image-box from descendant to direct-child targeting for .stk-inner-blocks, restricting the grid-related rules to only direct children instead of all descendants.

Changes

Cohort / File(s)	Change Summary
CSS Selector Refinement src/block/image-box/style.scss	Modified selector from .stk-inner-blocks to > .stk-inner-blocks to target only direct child elements, aligning with existing direct-child patterns and limiting grid styling scope

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single CSS selector modification in one file
• Straightforward specificity adjustment with no logic changes
• Clear scope refinement to match existing code patterns

Poem

🐰 A selector so precise, direct and bright,
Grid children dance in their proper light!
No more cascade through nested halls—
Each button group now proudly stands tall! ✨

Pre-merge checks and finishing touches

✅ 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: modifying the selector to target only direct children for grid display styling.
Linked Issues check	✅ Passed	The code change targets the root cause of the Button Group display issue by changing the CSS selector from descendant to direct child, which should prevent unintended grid styling on nested elements.
Out of Scope Changes check	✅ Passed	The change is focused and directly addresses the linked issue #3246, modifying only the necessary CSS selector without introducing unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/3246-image-box-innerblocks

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7d01e08 and 77776ac.

📒 Files selected for processing (1)

• src/block/image-box/style.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)

• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: build
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP 6.5.5

---

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
pr3652-stackable-3652-merge.zip	77776ac

[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/pr3652-stackable-3652-merge.zip"}}]}