Widget size too small when explicitly specified and completely messed up core gauge when auto is specified

[colinl]

Current Behavior

When a Gauge Classic widget size is explicitly defined it is displaying too small. For example, if it is defined to be 3x3 in a group of width 3 then it shows smaller than if it is defined as auto size.
This is a regression in v1.24.1. Version 1.24.0 introduced a problem where a vertical scroll bar appeared, in 1.24.1 the scroll bar has disappeared but the gauge is shrunk.
In fact I see that it has completely messed up the core gauge node when auto is specified and shrunk it when an explicit size is specified.

Expected Behavior

3x3 and Auto should show the same size in a width 3 group

Steps To Reproduce

Install https://flows.nodered.org/node/@colinl/node-red-dashboard-2-ui-gauge-classic)
Import the attached flow, which has a classic gauge size auto and 3x3 in a 3x3 group and the same for core gauge node. This is the result

[{"id":"bcc7d97b16534d33","type":"group","z":"997da33a0beedade","name":"Gauge size test","style":{"label":true},"nodes":["fd4aa5affad9af01","9ffe63aa1f8baa5f","bfde22ae22e6dcad","85193b75029c35b3"],"x":354,"y":7299,"w":192,"h":222},{"id":"fd4aa5affad9af01","type":"ui-gauge","z":"997da33a0beedade","g":"bcc7d97b16534d33","name":"Core Auto","group":"f72b0485d15f8689","order":3,"width":"0","height":"0","gtype":"gauge-34","gstyle":"needle","title":"Auto","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":440,"y":7440,"wires":[]},{"id":"9ffe63aa1f8baa5f","type":"ui-gauge-classic","z":"997da33a0beedade","g":"bcc7d97b16534d33","name":"Classic Auto","group":"f72b0485d15f8689","order":1,"width":0,"height":0,"min":0,"max":10,"sectors":[],"major_division":1,"minor_division":0.2,"value_decimal_places":1,"scale_decimal_places":0,"label":"Auto","measurement":"temperature","units":"°C","needles":[{"topic":"","color":"black","lengthPercent":"100"}],"sweep_angle":250,"myclass":"","x":450,"y":7340,"wires":[]},{"id":"bfde22ae22e6dcad","type":"ui-gauge-classic","z":"997da33a0beedade","g":"bcc7d97b16534d33","name":"Classic 3x3","group":"f72b0485d15f8689","order":2,"width":"3","height":"3","min":0,"max":10,"sectors":[],"major_division":1,"minor_division":0.2,"value_decimal_places":1,"scale_decimal_places":0,"label":"3x3","measurement":"temperature","units":"°C","needles":[{"topic":"","color":"black","lengthPercent":"100"}],"sweep_angle":250,"myclass":"","x":450,"y":7380,"wires":[]},{"id":"85193b75029c35b3","type":"ui-gauge","z":"997da33a0beedade","g":"bcc7d97b16534d33","name":"Core 3x3","group":"f72b0485d15f8689","order":4,"width":"3","height":"3","gtype":"gauge-34","gstyle":"needle","title":"3x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":440,"y":7480,"wires":[]},{"id":"f72b0485d15f8689","type":"ui-group","name":"Gauge Size Test","page":"c6ff182a4185f2f2","width":"3","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"f9b6670b127dc219","breakpoints":[{"name":"Default","px":0,"cols":3},{"name":"Tablet","px":576,"cols":6},{"name":"Small Desktop","px":768,"cols":9},{"name":"Desktop","px":1024,"cols":12}],"order":6,"className":"","visible":true,"disabled":false},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"headerContent":"page","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Environment

• Dashboard version: 1.24.1
• Node-RED version: 4.0.9
• Node.js version: 22.16.0
• npm version:
• Platform/OS: Uvbuntu
• Browser: Edge

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[colinl]

Related gauge classic issue colinl/node-red-dashboard-2-ui-gauge-classic#20

[joepavitt]

So the difference here is that auto allows a widget to increase it's height to anything, including modifying hte height of a given row such that the content will fit without a scrollbar. The 3x3 explicitly locks the height to 3 rows.

This had been an oversight for a long time in Dashboard, and has been raised by many in forms about inconsistency in heights of groups, widgets, etc.

[colinl]

Should this have been a major release as it will break many dashboards?

Is it limiting the size by shrinking it till it will fit in?

Is the issue with the core gauge a different issue as that appears to be completely broken when auto is specified?

[joepavitt]

Should this have been a major release as it will break many dashboards?

It went out as 1.24.0, the 1.24.1 then fixed the scroll issue introduced. Not worthy of a 2.0 imo, as it fixed many of the problems raised by the community, and it won't "break" dashboards, it will just provide consistency in heights.

Is the issue with the core gauge a different issue as that appears to be completely broken when auto is specified?

I hadn't spotted that, yes, that's a new issue.

[colinl]

In fact the issue with the core node seems to be present in 1.23.0 too, so is completely unrelated.

[colinl]

So how can I write the gauge-classic node so that if the size is specified absolutely that it is responsive with window width in the same way that it is if I specify auto? In other words, when the window width is increased the gauge scales up so that it fills the specified width?

[joepavitt]

In other words, when the window width is increased the gauge scales up so that it fills the specified width?

It looks like you're already doing so. With a circular/square gauge, you're constrained by the smallest dimension. So even if the width increases, with a fixed height of 3 for example, then the gauge will always be constrained in that dimension.

[colinl]

The situation now is that if the window width is increased then the gauge stays the same size on the screen, so it does not fill the width of the group. It used to be that it increased in width and height as the screen width was increased, as it does if the width is auto.