Widget size varies with group width

[colinl]

Current Behavior

The size of widgets varies with the width of the containing group. For example here are six 1x1 buttons in a group of width 6 and two buttons in a group of width 2.

The buttons in the second group are narrower than in the first. The bug appears to lie in the calculation of group width. A group of width n should allow room for n widgets, n-1 inter-widget gaps, and 2 border gaps at the sides. Currently it appears to only allow for 1 border gap so the widgets have to be shrunk to fit in.

Does anyone know where the code that sizes the group is?

Expected Behavior

No response

Steps To Reproduce

Import this flow and if necessary reduce the window width so the groups lie above each other. This does not affect the issue but makes it easier to see.

[{"id":"708fb2e61d38b271","type":"group","z":"997da33a0beedade","name":"Button Width Test","style":{"label":true},"nodes":["bafbd196632d4d9f","4698f660c113e1f3","8fdb7f4e8a8cc6c5","9e35f17b19b7fd0b","adbfdc33663e1abb","82272e556a61cd32","eb3f9d0e95d20745","e7e9e4875d859fb1"],"x":234,"y":4159,"w":832,"h":142},{"id":"bafbd196632d4d9f","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":4,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":310,"y":4200,"wires":[[]]},{"id":"4698f660c113e1f3","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":3,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":750,"y":4200,"wires":[[]]},{"id":"8fdb7f4e8a8cc6c5","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":2,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":610,"y":4200,"wires":[[]]},{"id":"9e35f17b19b7fd0b","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":470,"y":4200,"wires":[[]]},{"id":"adbfdc33663e1abb","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":2,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":870,"y":4200,"wires":[[]]},{"id":"82272e556a61cd32","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f61ab9f04574e6e5","name":"","label":"button","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":310,"y":4260,"wires":[[]]},{"id":"eb3f9d0e95d20745","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":2,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":990,"y":4200,"wires":[[]]},{"id":"e7e9e4875d859fb1","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f61ab9f04574e6e5","name":"","label":"button","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":470,"y":4260,"wires":[[]]},{"id":"f4cd34922b93a93a","type":"ui-group","name":"6x1","page":"94740f3451825304","width":"6","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"f61ab9f04574e6e5","type":"ui-group","name":"2x1","page":"94740f3451825304","width":"2","height":1,"order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"94740f3451825304","type":"ui-page","name":"group width test","ui":"ID-BASE-1","path":"/group_width","icon":"home","layout":"grid","theme":"c4cba76c368d7996","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":1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"c4cba76c368d7996","type":"ui-theme","name":"Test theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"616b43494b331658","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.28.0"}}]

Environment

• Dashboard version:
• Node-RED version:
• Node.js version:
• npm version:
• Platform/OS:
• Browser:

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[colinl]

See also https://discourse.nodered.org/t/a-strange-anomaly-with-column-widths-dashboard-2-0/99261

[colinl]

Having looked at how this works I think the CSS is well above my rather basic knowledge in that area, so I would at least need someone to advise on how to solve this before I could do anything.