FlowFuse / FlowFuse/node-red-dashboard

Text in buttons folding too aggresively

Open
#2,220 2 comments 0 reactions 1 assignee Claimed by @n-lark View on GitHub
needs-triage
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.

Image

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

Image

### 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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.