Updating to @flowfuse/[email protected] a bug occurred in "ui-group node"

[RodrigoCAlmeida]

Current Behavior

the ui-group node is not displaying correctly. In version 1.11.1 it works

Expected Behavior

In version node-red-dashboard 1.11.1 it works

Steps To Reproduce

Environment

• Dashboard version: 1.12.1
• Node-RED version: 3.1.9
• Node.js version: v18.20.3
• npm version: 10.7.0
• Platform/OS: Linux/Debian
• Browser: Chrome

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[colinl]

This release seems to have messed up many of my dashboard pages when viewed on mobile. For example I have a group which is 4 wide and if I place buttons sized 2x1 they no longer fit side by side. They appear to be sized about 3x1 instead of 2x1. I can't get the same effect on a laptop by shrinking the window. The page Layout is Fixed.

Edit:
I had skipped 1.12.0 and trying it I see that things were messed up there too, in fact the buttons came out full width in the 4 wide group. Going back to 1.11.1 restores normal operation. I can post some flows and screenshots if necessary.

[RodrigoCAlmeida]

@colinl Thanks for the comment, screenshots and flows would be very useful

[arturv2000]

On PC (dind't try in Mobile), but on Windows (Edge) it seems to be working...

Group Size 6x1
Button Size 3x1
Text Size 3x1
Gauge Size: 3x3

Grid Layout:

Fixed Layout

There was an issue in v1.12.0 related to this that affected the Fixed Layout, but that was fixed in v1.12.1

@colinl The issue in mobile is most likely related to this change made in this PR #979

[colinl]

@RodrigoCAlmeida do you only see the problem when viewed on a mobile device (or similar small screen device)?

[colinl]

Two button, size 2x1 in group width 4, dashboard 1.12.1

The same in v1.11.1

The flow

[{"id":"2e0c1ae1a80ecb97","type":"group","z":"997da33a0beedade","name":"1.12.1 widget size test","style":{"label":true},"nodes":["6df4d7ba8b5aa7e3","73d0d0027d34b1f9"],"x":374,"y":6479,"w":372,"h":82},{"id":"6df4d7ba8b5aa7e3","type":"ui-button","z":"997da33a0beedade","g":"2e0c1ae1a80ecb97","group":"9e8e0ecd80d6a0d3","name":"","label":"button 1","order":1,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":460,"y":6520,"wires":[[]]},{"id":"73d0d0027d34b1f9","type":"ui-button","z":"997da33a0beedade","g":"2e0c1ae1a80ecb97","group":"9e8e0ecd80d6a0d3","name":"","label":"button 2","order":2,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":660,"y":6520,"wires":[[]]},{"id":"9e8e0ecd80d6a0d3","type":"ui-group","name":"1.12.1 widget size test","page":"848e2943690b97df","width":"4","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"848e2943690b97df","type":"ui-page","name":"1.12.1 widget size test page","ui":"ID-BASE-1","path":"/page11","icon":"home","layout":"flex","theme":"b6221fc08b602ea9","order":1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"]},{"id":"b6221fc08b602ea9","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Viewed on PC both show the buttons side by side as expected. It isn't only buttons, most of my pages are messed up completely.

[colinl]

I think this may actually be a continuation of Issue #1006, which is marked fixed in 1.12.1, but I suspect is not fully fixed.

[joepavitt]

This was an intentional change: #979

I'm open to changing where the breakpoint occurs to make it occur at a narrower point, but we had many users asking me for this.

[colinl]

This has completely messed up most of my pages. Most pages use a group width of 6 and widgets 2, 4 or 6 wide.
According to my phone spec it is 1080 px wide.

[joepavitt]

What phone do you have?

The breakpoint is specified to come into play at 576px, as per:

node-red-dashboard/ui/src/layouts/Grid.vue

Lines 152 to 156 in 61e3d24

	@media only screen and (max-width: 576px) {
	.nrdb-layout--grid {
	--layout-columns: 3;
	}
	}

I can specify further that it should come into play at portrait only, and make the breakpoint narrower too. I could also look at exposing the column count as a configurable unit via the ui-base settings? Then, those that work in 3's, can keep the default, those that work in 2/4/6 units can specify accordingly?

[colinl]

It is a Nord Plus One 2T https://www.gsmarena.com/oneplus_nord_2t-11517.php

I don't understand how the layout is supposed to work. The docs I have found have not helped me to understand the operation.

I am able to build the dashboard locally if you want me to add some debug to work out what is going on.

[joepavitt]

I don't understand how the layout is supposed to work. The docs I have found have not helped me to understand the operation.

That's my bad for not updating the "Fixed" documentayion to detail the breakpoint. Essentially, on mobile, it turns into a "Grid" of 3 columns. In the screenshots above from @arturv2000 and @RodrigoCAlmeida - they're configured "Grid" layouts, which does have updated documentation to detail the new breakpoint.

[arturv2000]

@colinl Can you go to one of these sites:

https://whatismyviewport.com/
https://viewportsizer.com/
https://myviewport.com/

And check what resolution is being presented, I think this viewport is the resolution that matters and not the actual screen resolution

In my case I have a Samsung Galaxy S20 FE 5G and the resolution presented is 360x667(Portrait) or 723x336 (Landscape). If in desktop site mode it changes to 980x1816 and 980x379.

And I can see the issue with colin example, wasn't seeing initially on Android since I have chrome setup to use desktop site for the domain where I have node-red :)

[colinl]

https://whatismyviewport.com/
Viewport 360x663, screen size 360x800. So that explains why I am seeing the problem.
I didn't realise that selecting Desktop Site changes the virtual screen size. In whatismyviewport.com that changes it to 980x1805, so presumably that would fix the problem for me - but see below.

https://viewportsizer.com/
Also 360x663

https://myviewport.com/
Page size: 360x719
Window total size: 360x663
Screen resolution: 1080x2400

Which confirms that the viewport and screen resolution are not 1:1

Having now tried Desktop Site that is no use to me either as it makes the whole display much too small.

[colinl]

Can I override this in CSS, to keep me going for the moment?

[colinl]

Something still doesn't add up. According to the docs, in Fixed layout, each column should be 90px wide, but I have some groups 6 wide so they should not fit on the screen even with 1.11.1 as I only have 360px. Even odder, if I have a group 6 wide and another 4 wide on the same page, then in landscape mode they show one above the other and look the right number of pixels wide (540 and 360), but in portrait they both fill the width of the screen, so the pixels have been scaled differently for the two groups.

[joepavitt]

Overriding CSS

Can I override this in CSS, to keep me going for the moment?

yes, absolutely, with:

@media only screen and (max-width: 576px) { 
     .nrdb-layout--grid { 
         --layout-columns: 3 !important; 
     } 
 } 

set 3 to 6 here to go back to the "old" behaviour.

Fixed layout Changes

but in portrait they both fill the width of the screen, so the pixels have been scaled differently for the two groups.

As I mentioned above, on mobile (<576px), "Fixed" layout turns into a Grid layout, with 3 columns, to make it more responsive. I can revert this if you guys would prefer that. Fixed is not at all responsive, this was my attempt to at least make it responsive on mobile.

[colinl]

At last I get it. With 1.11.1, a 6 wide group was fixed at 540px unless the screen width was less than 768px in which case it used Grid layout and scaled the group to the screen width. With 1.12.1, however, if it is less that 576 then the group width is effectively clamped at 3 wide, causing the problem I am seeing.
What the ideal general solution is, I do not know. Personally, provided I can recover the situation using CSS I am ok.

[colinl]

@media only screen and (max-width: 576px) {
.nrdb-layout--grid {
--layout-columns: 3 !important;
}
}

I actually had to use .nrdb-layout--flex rather than grid. Does that make sense?

[RodrigoCAlmeida]

@joepavitt In my opinion it would be better to revert, as currently some customers who use node-red on their cell phones (Android, iPhone) and the screens have lost responsiveness in this case.
@colinl The problem occurred on the cell phones (Android) that I tested. Cellular Resolution (2400x1080)

[colinl]

@joepavitt I am looking at the examples in #979 but I don't understand why the layout with the gauges was displaying as shown. I would have expected the gauges just to shrink till they are small enough to fit.

[joepavitt]

I would have expected the gauges just to shrink till they are small enough to fit.

The gauges were set to be 3 units wide inside a size 9 group. So, when on mobile, the size 3 was full-width

[joepavitt]

@RodrigoCAlmeida as a quick fix, can you please add:

@media only screen and (max-width: 576px) { 
     .nrdb-layout--grid { 
         --layout-columns: 6 !important; 
     } 
 } 

into a ui-template with "CSS (All Pages)" set as the type. That will revert the behaviour.

[RodrigoCAlmeida]

I think the problem is that the screen's aspect ratio influences a lot because even with the same resolution, the aspect ratio can vary. Cell phone screens often have different aspects (such as 18:9 or 21:9) compared to computer monitors, for example (16:9). This can cause layout issues, with elements being compressed or spaced differently

[RodrigoCAlmeida]

@joepavitt Thanks