Inspector UI Fixes

[lankaukk]

Making a number of updates to the inspector UI:

• reordering the "container" section to be below the frame section
• when the border-radius and padding controls are split into 4 inputs, the last 2 move onto another row
• the split input control always stays in the right place
• when a dropdown is not hovered, the v expansion arrow stays at the end of the text, and moves to the far right of the input only when it is hovered
• the opacity control is not a scrubbable input, no longer a slider
• blend mode is always visible
• the overflow toggle is removed (since we already have clip content)
• the alignment buttons are above the style section
• other various padding and border styling tweaks

BK:

• updated the tests to use the opacity input instead of the opacity slider
• updated the tests to look for the Background label instead of Container (which was removed)

Before	After

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]

#13576 Bundle Size — 62.65MiB (~-0.01%).

c5258e2(current) vs 6339ece master#13575(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics   3 changes 1 improvement

	Current #13576	Baseline #13575
Initial JS	45.73MiB(-0.01%)	45.73MiB
Initial CSS	0B	0B
Cache Invalidation	28.12%	21.57%
Chunks	31	31
Assets	34	34
Modules	4377(-0.07%)	4380
Duplicate Modules	525	525
Duplicate Code	31.64%	31.64%
Packages	469	469
Duplicate Packages	70	70

Bundle size by type   2 changes 2 improvements

	Current #13576	Baseline #13575
JS	62.64MiB (~-0.01%)	62.65MiB
HTML	11.16KiB (-0.33%)	11.2KiB

---

Bundle analysis report Branch inspector-ui Project dashboard

[maltenuhn]

Can we change the four-paddings control order from 'TR/BL' to 'LT/RB' per Discord?

[liady]

minor - but this could be a useCallback just to prevent re-rendering

[liady]

very minor - but better to do {{ flexWrap: wrap ? 'wrap' : 'nowrap', ...style }} so that the consumer will always be able to override (for example if they pass style={{ flexWrap: 'wrap'}} but no wrap prop)