node-red-dashboard icon indicating copy to clipboard operation
node-red-dashboard copied to clipboard

Chart label text not scaling correctly on mobile device

Open colinl opened this issue 2 months ago • 1 comments

Current Behavior

The flow below correctly shows this in Edge on a PC with the window shrunk down to minimum size (dashboard v1.29.0)

Image

Note that the label text is shown in full. On a phone, in portrait mode it shows as

Image

In landscape mode it shows the full title.

Using dashboard v1.27 on the phone it showed the full text in both landscape and portrait. In portrait the font size is scaled down compared to the font size in landscape.

Whether there is anything we can do about this I don't know.

[{"id":"b29ff552a7bdcaf4","type":"ui-chart","z":"a17e320916ab3b9b","group":"4ecca468c23df954","name":"Монитор","label":"Мониторинг напряжения, потребления, потерь и частоты онлайн","order":1,"chartType":"bar","category":"seriesMon","categoryType":"property","xAxisLabel":"","xAxisProperty":"topic","xAxisPropertyType":"msg","xAxisType":"category","xAxisFormat":"dd.LL","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"valuesMon","yAxisPropertyType":"property","ymin":"0","ymax":"600","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":"2","showLegend":true,"removeOlder":"5","removeOlderUnit":"604800","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":"5","className":"","interpolation":"smooth","x":240,"y":100,"wires":[[]]},{"id":"4ecca468c23df954","type":"ui-group","name":"Онлайн","page":"d8ffe29d78eeda2b","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d8ffe29d78eeda2b","type":"ui-page","name":"Мониторинг","ui":"ID-BASE-1","path":"/monitoring","icon":"home","layout":"grid","theme":"ec10442445c8ea89","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":12,"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":"ec10442445c8ea89","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"b057ae3935c443b3","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

Expected Behavior

No response

Steps To Reproduce

No response

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 avatar Oct 14 '25 10:10 colinl

Current Behavior

The flow below correctly shows this in Edge on a PC with the window shrunk down to minimum size (dashboard v1.29.0)

Image Note that the label text is shown in full. On a phone, in portrait mode it shows as Image In landscape mode it shows the full title.

Using dashboard v1.27 on the phone it showed the full text in both landscape and portrait. In portrait the font size is scaled down compared to the font size in landscape.

Whether there is anything we can do about this I don't know.

[{"id":"b29ff552a7bdcaf4","type":"ui-chart","z":"a17e320916ab3b9b","group":"4ecca468c23df954","name":"Монитор","label":"Мониторинг напряжения, потребления, потерь и частоты онлайн","order":1,"chartType":"bar","category":"seriesMon","categoryType":"property","xAxisLabel":"","xAxisProperty":"topic","xAxisPropertyType":"msg","xAxisType":"category","xAxisFormat":"dd.LL","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"valuesMon","yAxisPropertyType":"property","ymin":"0","ymax":"600","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":"2","showLegend":true,"removeOlder":"5","removeOlderUnit":"604800","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":"5","className":"","interpolation":"smooth","x":240,"y":100,"wires":[[]]},{"id":"4ecca468c23df954","type":"ui-group","name":"Онлайн","page":"d8ffe29d78eeda2b","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d8ffe29d78eeda2b","type":"ui-page","name":"Мониторинг","ui":"ID-BASE-1","path":"/monitoring","icon":"home","layout":"grid","theme":"ec10442445c8ea89","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":12,"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":"ec10442445c8ea89","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"b057ae3935c443b3","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

Expected Behavior

No response

Steps To Reproduce

No response

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

Hello. I experimented with New Line. This is what I got. But I should probably raise it a bit higher.

Image

teluse7 avatar Oct 17 '25 21:10 teluse7