Masonry: Fix heights init

[liuyenwei]

Summary

This PR fixes an issue introduced by #3544 that was causing overlapping positions in the defaultTwoColumnModuleLayout when a multi column item was rendered towards the end of the first page.

The overlap happens in the situation when initializeHeightsArray is called and the following is true:

• there is a two column item
• the two column item is positioned before single column items that come after it in the array

i.e.
[A, B, C, D, E, F, G] - assuming E is the multi column item and the layout looks like:

| A | B | C |
| D | F | G |
| _ | E | E |

In this scenario, the current logic will think that the column height for column 1, 2 are B + E and C + E respectively.

Fix

This PR fixes this scenario by simplifying the logic. Ultimately, the height of each column is determine by the lowest position module in that column so we can change this to just be:
(for each item):

• determine which column the item is positioned in
• calculate its absolute height (top + height + gutter)
• for each column the module spans, update the column height if the absolute height is greater

Test Plan

Tested this in pinboard - I managed to find an example that consistently repro'd
Also added unit tests around the heights logic using the same repro ^

[netlify]

✅ Deploy Preview for gestalt ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	b213650
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/663ab477e544d600089987e1
😎 Deploy Preview	https://deploy-preview-3555--gestalt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.