add responsiveness to oh-knob

[mannemiethe]

to fix the issue: #3204

Add responsive sizing to oh-knob widget

This PR adds responsive sizing capabilities to the oh-knob widget, allowing it to automatically adjust its size based on its container dimensions.

Changes

• Added responsive configuration option to enable dynamic sizing
• Implemented ResizeObserver to detect parent container size changes
• Added window resize and gridster-resized event listeners for layout changes
• When responsive is enabled and size is set (1-100 or "100%"), the knob scales proportionally to fit its container
• Falls back to measured pixel dimensions when no size is specified
• Properly cleans up listeners and observers on component destruction

Usage

Set responsive: true in the widget configuration to enable automatic sizing. Optionally specify size as a percentage (1-100 or "100%") to control the knob's size relative to its container.

Implementation

• Follows the same responsive pattern used in oh-grid-item and other layout widgets
• Compatible with grid layouts, canvas layouts, and standard containers
• Maintains backward compatibility - existing configurations work unchanged

[florian-h05]

@mannemiethe Thank you for your PR. Due to the upcoming 5.1.0 release we are no in a feature freeze, meaning no new features can be merged before the 5.1.0 release is done. Your PR will be reviewed some time after the release.

[mannemiethe]

@florian-h05: I understand. No Problem but can review it and merge it after the release?

[florian-h05]

After the release we can review and merge again 👍

[relativeci]

#4173 Bundle Size — 12.54MiB (~+0.01%).

649c2c9(current) vs 40ebf4b main#4172(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics   5 changes 1 regression

	Current #4173	Baseline #4172
Initial JS	1.52MiB(+0.06%)	1.52MiB
Initial CSS	0B	0B
Cache Invalidation	60.27%	7.03%
Chunks	620(+0.98%)	614
Assets	702(+0.86%)	696
Modules	2437(-0.04%)	2438
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	130	130
Duplicate Packages	1	1

Bundle size by type   2 changes 1 regression 1 improvement

	Current #4173	Baseline #4172
JS	10.87MiB (+0.01%)	10.87MiB
CSS	846.15KiB (-0.02%)	846.32KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	45.73KiB	45.73KiB
Other	847B	847B

Bundle analysis report Branch mannemiethe:oh-knob_add_responsi... Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[mannemiethe]

who can review and merge this PR?

[jsjames]

@mannemiethe - I started to look at this already - but need a few days. The better place for handling resizing is at the the css level - where you could define the width/height and then the browser would handle everything for you - however the base round-slider component does not support this.

The round-slider component has a few other limitations regarding some of the the theme support features (#3738) where it overrides (for some reason) any defined css color class with defaults. I'm looking at how intrusive it will be to modify the component to support classes better and in doing so, there might be a good way to use css size properties to automatically support responsiveness.

Lastly, the round-slider is the only component requiring jquery in the UI. While jquery is not huge, it is not insignificant in size. I have an initial port of the round-slider component using dom7 which is working. Dom7 is what all the f7 components are built with and is syntactically similar to jquery, but there are a few deltas which i'm working through.

I'll hope to have something for testing in the next few days. Assuming this goes well, the responsiveness can be done at the browser level.

[mannemiethe]

i mean until you can deliver this new component, it would be nice if this feature can be used.