Correctly position grid resize controls.

[seanparsons]

Problem:
The grid resize controls had their positioning quickly thrown together and somewhat implemented by eye.

Fix:
As part of this work the two big blocks of code for columns and rows were unified into a single GridResizing component.

The positions have been better positioned by creating a container element which straddles the center line of the gap and then the control is appropriately justified within that to keep it centered or in the case of the row controls right justified.

It also uses the CanvasLabel component to handle most of the work for actually displaying things.

Screenshot:

Commit Details:

• Create a common component of GridResizing.
• Use the new GridResizing component in place of the embedded column and row handling.

Manual Tests:
I hereby swear that:

• I opened a hydrogen project and it loaded
• I could navigate to various routes in Preview mode

[github-actions]

Try me

[relativeci]

#13277 Bundle Size — 62.5MiB (~-0.01%).

e588b3c(current) vs 6339ece master#13264(baseline)

Warning

Bundle contains 51 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 improvement

	Current #13277	Baseline #13264
Initial JS	45.56MiB(~-0.01%)	45.56MiB
Initial CSS	0B	0B
Cache Invalidation	21.62%	21.84%
Chunks	30	30
Assets	33	33
Modules	4323	4323
Duplicate Modules	524	524
Duplicate Code	31.74%	31.74%
Packages	450	450
Duplicate Packages	51	51

Bundle size by type   2 changes 2 improvements

	Current #13277	Baseline #13264
JS	62.49MiB (~-0.01%)	62.5MiB
HTML	11.16KiB (-0.33%)	11.2KiB

---

Bundle analysis report Branch fix/grid-resize-controls Project dashboard