FlowFuse / FlowFuse/node-red-dashboard

Gauge not resizing correctly upon screen size/resolution

Open
#1,639 3 comments 0 reactions 0 assignees View on GitHub
needs-triage type:bug
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):

![Image](https://github.com/user-attachments/assets/2acfb0d1-5cc6-4d32-b078-37c3774975fa)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.