Gauge not resizing correctly upon screen size/resolution

[jeroenst]

Current Behavior

I use the gauge for several devices, laptop, tablet and cellular.

I want 3 gauges on one line, it works fine but when the screen becomes to narrow several things go wrong:

1. The size of the needle and rounded bars are not resized upon screen resizing which causes them to be to big to display correctly.
2. The font size of the min and max value and title are not resized causing them to be to big on small screens and to be to small on big screens. (The same issue occurs with the text node)
3. There becomes lot of unused white space above the gauge when the screen narrows

View when resizing screen:

https://github.com/user-attachments/assets/5240a64e-a8d5-4ec7-9738-a9c02a7d2134

View on my cellular (which is pretty unusable):

Only way around this is to view the dashboard in desktop mode on mobile and tablet, but I have to write a lot of css to change font size for text to be readable/not to big.

Expected Behavior

The gauge should resize in relation to the screen in all resolutions and should look the same in all resolutions.

Steps To Reproduce

Put 3 gauges on a dashboard and resize the screen.

Also open it on a mobile and a tablet

Environment

• Dashboard version: 1.22.1
• Node-RED version: 4.0.9
• Node.js version: 20.19.0
• npm version: 10.8.2
• Platform/OS: Docker container in Linux on Synology DS224+
• Browser: Version 134.0.6998.117 (Official Build) (64-bit)

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[hotNipi]

The gauge should resize in relation to the screen in all resolutions and should look the same in all resolutions.

It is impossible to achieve. To fit round thing into the resizable container (rectangular) and preserve it's shape no mater the size and/or aspect ratio of the container forces the thing to have abnormal sizes or creates a lot of white space around it or makes it unreadable.

gauge-linear is made with care to support responsive layout. Try it out.

[joepavitt]

What are you expecting to see here instead, the three gauges stack on top of one another? There isn't enough screen real estate to have them rendered side-by-side on that small a screen

[jeroenst]

Well, actually when I set the mobile browser to desktop mode it fits.

It are the colored bands of the gauges and the needle that do not shrink and expand.

Currently my work around is using desktop mode on mobile devices with custom css for bigger font sizes.

So this is desktop mode on mobile which works:

And this is normal mode in mobile which is unusable: