fix (icon list): display icons on latest Chromium-based browsers

[kaeizen]

fixes #3613

Summary by CodeRabbit

• Bug Fixes

  • Fixed inconsistent icon sizes in icon lists by preventing nested SVGs from inheriting unintended widths, ensuring correct display across devices, themes, and breakpoints. Improves alignment and prevents clipping or unexpected scaling.

• Style

  • Standardized icon rendering within icon lists for a more consistent visual appearance and layout stability. No functional changes, settings adjustments, or performance impact.

[coderabbitai]

Walkthrough

Adds a CSS rule in the Icon List block styles to set nested SVG width to initial for elements with ids starting with stk-icon-list__icon-svg-def, affecting icon rendering in Chromium-based browsers. No functional logic or data handling changes.

Changes

Cohort / File(s)	Change Summary
Icon List CSS fix src/block/icon-list/style.scss	Adds selector targeting #stk-icon-list__icon-svg-def* svg * to set width: initial;, overriding inherited widths for nested SVG elements.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A nibble of CSS, a twitch of an ear,
My icons hop back—now bright and clear!
Chromium clouds drift, bugs disappear,
Width set to “initial,” no vanishing here.
Thump-thump! says the rabbit, full of cheer.

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 summarizes the primary change—restoring icon visibility in the icon list on Chromium-based browsers—and uses concise, clear phrasing without extraneous details.
Linked Issues Check	✅ Passed	The added CSS rule resets the width of the icon-list SVG elements, directly resolving the blank-icon bug in both the editor and frontend on Chrome and Brave as described in issue #3613.
Out of Scope Changes Check	✅ Passed	The pull request solely introduces a targeted CSS adjustment within the icon-list style block to address the icon rendering issue and does not include any unrelated or extraneous changes.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/icon-list-icons-not-displaying

---

📜 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 578783c and 254fa4d.

📒 Files selected for processing (1)

• src/block/icon-list/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 7.3 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: build
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP latest

---

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
pr3614-stackable-3614-merge.zip	254fa4d

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