feat(editor): show correct responsive value according to breakpoint

[liady]

This PR adds the ability to display the correct value in the controller according to the Scene size.
For example - if the element has className='pt-[20px] lg:pt-[150px] md:pt-[110px], and the Scene has a width of 1000px (which is larger than md but smaller than lg) - the paddingTop control will correctly show 110px.

Details:

• This PR augments ParsedCSSStyleProperty, so instead of containing just the value it now holds:
  • a list of variants (the possible values and for each one the modifiers that when applied, the value is chosen. a screen size is a modifier)
  • the currentVariant - which is the value that is currently selected according to the Scene size.
• After parsing the Tailwind classes using the 3rd-party parser (as before), we call getModifiers, that converts the Tailwind specific variants from the parser representation that looks like:

{type: 'media', value: 'sm'}

to our generic representation:

{
  type: 'media-size',
  size: {
    min: { value: 0, unit: 'px' },
    max: { value: 100, unit: 'em' }
  }
}

• The getModifiers function uses an interal screensConfigToScreenSizes function - that parses the Tailwind config to have a map of <screenAlias> to ScreenSize
• Both are covered in tests in tailwind-responsive-utils.spec.ts
• This PR uses the utils that were merged in feat(editor): add responsive utils #6716 (specifically selectValueByBreakpoint to select the best matching variant)

Example (note that this PR does not contain the Scene resize buttons):

Monosnap.screencast.2024-12-04.19-40-23.mp4

Manual Tests:
I hereby swear that:

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

[github-actions]

Try me

[relativeci]

#15424 Bundle Size — 58.22MiB (~+0.01%).

be8d377(current) vs d1d46c1 master#15423(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics   3 changes 1 regression

	Current #15424	Baseline #15423
Initial JS	41.19MiB(~+0.01%)	41.19MiB
Initial CSS	0B	0B
Cache Invalidation	18.26%	18.14%
Chunks	20	20
Assets	22	22
Modules	4191(+0.02%)	4190
Duplicate Modules	213	213
Duplicate Code	27.24%	27.24%
Packages	477	477
Duplicate Packages	70	70

Bundle size by type   2 changes 1 regression 1 improvement

	Current #15424	Baseline #15423
JS	58.21MiB (~+0.01%)	58.21MiB
HTML	9.4KiB (-0.21%)	9.42KiB

Bundle analysis report Branch feat/show-correct-value Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

Copilot reviewed 5 out of 7 changed files in this pull request and generated no comments.

Files not reviewed (2)

• editor/src/components/canvas/canvas-types.ts: Evaluated as low risk
• editor/src/components/canvas/commands/utils/property-utils.ts: Evaluated as low risk

Comments suppressed due to low confidence (1)

editor/src/components/canvas/plugins/inline-style-plugin.ts:49

• [nitpick] The modifiers parameter in the cssVariant function is optional, but it's being passed an empty array. Ensure that this behavior is intended and consistent.

const currentVariant = cssVariant(parsed.value, [])