fix: ensure flickering grid covers full container edges

[santychuy]

Problem

The FlickeringGrid component leaves gaps on the right and bottom edges when container dimensions aren't perfectly divisible by (squareSize + gridGap).

Using Math.floor() truncates the division, rendering only complete cells and leaving remainder space uncovered.

Example:

• Container: 500px × 262px
• Cell size: squareSize (6px) + gridGap (12px) = 18px
• Current calculation:
  • Columns: Math.floor(500 / 18) = 27 → 486px coverage → 14px gap on right edge
  • Rows: Math.floor(262 / 18) = 14 → 252px coverage → 10px gap on bottom edge

Solution

Changed Math.floor() to Math.ceil() on lines 58-59 to ensure enough grid cells are rendered to cover the entire container.

After fix:

• Columns: Math.ceil(500 / 18) = 28 → 504px coverage → full edge-to-edge coverage
• Rows: Math.ceil(262 / 18) = 15 → 270px coverage → full edge-to-edge coverage
  Any squares extending beyond the container boundaries are clipped by CSS overflow: hidden, resulting in seamless visual coverage without performance impact.

Visual Impact

Before: Inconsistent gaps on right/bottom edges depending on container size
After: Pixel-perfect edge-to-edge coverage in all cases

Demo

demo-fix-flickering-grid.mp4

[vercel]

@santychuy is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[Yeom-JinHo]

@santychuy
Thank you for your contribution!

There are merge conflicts, so I’ll rebase first and then merge.