FlowFuse / FlowFuse/node-red-dashboard
Gauge not resizing correctly upon screen size/resolution
- Dominant language
- HTML
- Stars
- 355
- Forks
- 82
- Avg merge
- 4d 23h
- Merged PRs (30d)
- 24
Description
### 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
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.