fix: force browser to recompute the grid for horizontal-scroller

[Arukuen]

Summary by CodeRabbit

• Bug Fixes
  • Fixed grid rendering issues in the horizontal scroller component.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a two-phase requestAnimationFrame sequence to toggle the gridAutoFlow property on initialized horizontal scroller elements, first setting it to 'row' then to 'column', to resolve grid rendering issues without modifying event handling or drag behavior.

Changes

Cohort / File(s)	Summary
Grid Rendering Fix src/block/horizontal-scroller/frontend-horizontal-scroller.js	Introduces two-phase requestAnimationFrame calls to toggle gridAutoFlow property ('row' → 'column') immediately after element initialization to address grid layout rendering issues.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A scroller was stuck in its grid, looking quite sad,
So we toggled the flow in a dance, oh so glad!
From row into column, through animation's sweet frame,
Now the layout flows smoothly—grid rendering tamed! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main change: forcing the browser to recompute the grid layout for the horizontal-scroller component, which matches the core objective of fixing grid rendering issues through a two-phase requestAnimationFrame sequence.
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 docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7ffd155 and 2369cb2.

📒 Files selected for processing (1)

• src/block/horizontal-scroller/frontend-horizontal-scroller.js

⏰ 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: PHP 7.3 and WP latest
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: build
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP 6.5.5

🔇 Additional comments (1)

src/block/horizontal-scroller/frontend-horizontal-scroller.js (1)

97-104: Reasonable fix using a known browser reflow technique.

The nested requestAnimationFrame pattern is a valid approach to force browser grid recalculation. This should resolve the whitespace rendering issue.

One minor consideration: the code assumes 'column' is always the correct final value. If this component ever supports different grid flow configurations, this could inadvertently override them.

♻️ Optional: Preserve the original value

 			el._StackableHasInitHorizontalScroller = true
 
-			// Fixes grid rendering issues by toggling the gridAutoFlow property
+			// Fixes grid whitespace rendering issues by toggling the gridAutoFlow property
 			requestAnimationFrame( () => {
+				const originalFlow = el.style.gridAutoFlow || 'column'
 				el.style.gridAutoFlow = 'row'
 				requestAnimationFrame( () => {
-					el.style.gridAutoFlow = 'column'
+					el.style.gridAutoFlow = originalFlow
 				} )
 			} )

---

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
pr3671-stackable-3671-merge.zip	2369cb2

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