FlowFuse / FlowFuse/node-red-dashboard
Text in buttons folding too aggresively
- Dominant language
- HTML
- Stars
- 355
- Forks
- 82
- Avg merge
- 4d 20h
- Merged PRs (30d)
- 24
Description
### Current Behavior
A change released in V1.31.0 via PR #2194 introduced automatic text folding in buttons where necessary. Unfortunately it is sometimes too aggressive and is folding text that used to fit inside the button.
The upper part shows the situation with the dashboard checked out before the PR is applied, and the lower part from after the PR is applied. This is using a browser on the PC and adjusting the window size. Worse, on my phone I now see
### Expected Behavior
_No response_
### Steps To Reproduce
Import the Sample flow and play with the window width in the browser to see the effect.
```
[{"id":"9cac9eacd1c744c4","type":"group","z":"997da33a0beedade","name":"Button text wrap test","style":{"label":true},"nodes":["765f1ef63091b1c5","9c19698f4f42b7ba","96418cb29b48fedf","4cea973941579ff4","4b653f2f9bfc8c20"],"x":74,"y":7099,"w":312,"h":202},{"id":"765f1ef63091b1c5","type":"ui-button","z":"997da33a0beedade","g":"9cac9eacd1c744c4","group":"aa06ee1d893d96d5","name":"Bedroom SP 22.0","label":"22.0","order":4,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"22.0","payloadType":"str","topic":"tydwr/bedroom/finalSetpoint","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":190,"y":7180,"wires":[["96418cb29b48fedf"]]},{"id":"9c19698f4f42b7ba","type":"ui-button","z":"997da33a0beedade","g":"9cac9eacd1c744c4","group":"aa06ee1d893d96d5","name":"Bedroom SP 22.5","label":"22.5","order":5,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"22.5","payloadType":"str","topic":"tydwr/bedroom/finalSetpoint","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":190,"y":7220,"wires":[["96418cb29b48fedf"]]},{"id":"96418cb29b48fedf","type":"junction","z":"997da33a0beedade","g":"9cac9eacd1c744c4","x":360,"y":7140,"wires":[[]]},{"id":"4cea973941579ff4","type":"ui-button","z":"997da33a0beedade","g":"9cac9eacd1c744c4","group":"aa06ee1d893d96d5","name":"Bedroom SP 21.5","label":"21.5","order":3,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"21.5","payloadType":"str","topic":"tydwr/bedroom/finalSetpoint","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":190,"y":7140,"wires":[["96418cb29b48fedf"]]},{"id":"4b653f2f9bfc8c20","type":"ui-text","z":"997da33a0beedade","g":"9cac9eacd1c744c4","group":"aa06ee1d893d96d5","order":0,"width":"3","height":"1","name":"Filler","label":"text 3x1","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"payload","valueType":"msg","x":150,"y":7260,"wires":[]},{"id":"aa06ee1d893d96d5","type":"ui-group","name":"Temperatures","page":"234ef20e1d91c10f","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"234ef20e1d91c10f","type":"ui-page","name":"Temperatures","ui":"ID-BASE-1","path":"/temperatures","icon":"","layout":"grid","theme":"23aa79f4e489b044","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"condensed-layout","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"23aa79f4e489b044","type":"ui-theme","name":"Theme 1","colors":{"surface":"#ffffff","primary":"#514fba","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"1px","groupGap":"1px","groupBorderRadius":"4px","widgetGap":"4px","density":"default"}},{"id":"08ee9c4721a14e20","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.31.0"}}]
```
### Environment
- Dashboard version: 1.31.0
- Node-RED version: 5.0.6
- Node.js version:
- npm version:
- Platform/OS:
- Browser: Brave and Chrome
### Have you provided an initial effort estimate for this issue?
I have provided an initial effort estimate
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.