Graphics improvements

[Terdious]

Hey !!

Actually I’m in the process of following up after v4.45 ^^.
I reopened the 1st PR 15 minutes ago (I’ll start with the binaries if that works for you), I’m catching up with DuckDB and seeing the new behavior and I’ll get back to you afterwards !!

As for this PR exactly … this minor thing actually took me an insane amount of time … I’ll be honest … I didn’t manage to … Note I’m not referring to your point specifically. To me the code around it doesn’t seem right. But I need to dive back into it and we’ll talk about it afterwards if that works for you.

Do you prefer that I prioritize this one or the binaries?

[pierre-gilles]

@Terdious

En ce qui concerne cette PR exactement … ce truc mineur m’a en fait pris un temps de dingue … Je vais être franc … je n’ai pas réussi … Attention je ne parle pas de ton point spécifiquement. Pour moi la partie code autour de ça ne me semble pas bonne. Mais il faut que je me replonge dedans et on en parle ensuite si ça te va.

What can’t you manage to do?

@Terdious

Do you prefer that I prioritize this one or the binaries?

Up to you, but for me that one is really, really cool for very little work, it’s super simple ^^

[Terdious]

@pierre-gilles

As you wish, but for me that one is really very very cool for very little work, it’s super simple ^^ I think that one can be merged much faster than the binaries

Oki !! (even if the binaries, I think there was nothing left except a display issue on mobile as far as I remember ^^) but that works for me ^^

@pierre-gilles

What can’t you do?

I’m checking it out ^^ But from what I remember it was about handling the display of dropdown menus appearing above/below in mobile mode due to the change in handling for dynamic columns… but I just ran the tests with my June changes and I don’t have the issue…
A positioning/overflow issue…

It’s complicated to let too much time pass!!^^

[Terdious]

Ok it’s fine I found it again.

When I made the change you asked me for (nothing major to begin with ^^), I ran some more complete tests and I ran into this issue:

• I was using overflow: hidden; on the column styles to keep the columns properly sized when the screen is reduced.
  
  
  
  However this produces this on the « Room devices » and « Devices » widgets:
  
  
  
  (the widget exceeds the column height and the hidden therefore hides what overflows.
  
  

I try to remove it but then the column sizing is no longer correct when the screen is reduced…

I pushed the code like that and updated to 4.45, tell me what you think? ^^ …

[pierre-gilles]

@Terdious I pulled your branch, I think the button to add widgets is missing :

I don’t really see the point of overflow:hidden, isn’t that what we’re supposed to use to manage the column widths?

[Terdious]

Argh!! Indeed, a change that I hadn’t reapplied!! It’s been pushed, they’re back! Sorry

[pierre-gilles]

@Terdious

I’m trying to remove it but then the column sizing is no longer correct when the screen is reduced …

I’m trying to reproduce it but even when removing the overflow:hidden, it works

[Terdious]

@pierre-gilles

I don’t really understand the point of overflow:hidden, isn’t that what we’re supposed to use to manage the width of the columns?

I honestly admit I didn’t understand either!!

The problem doesn’t appear (without overflow:hidden) on a new empty dashboard.

But when filling the columns, for example with a graph box that slightly increases the size of the column, you start to see that the 3rd column becomes smaller than the other 2:

and if we continue:

When I put the CSS overflow:hidden (clearly an idea from ChatGPT since my searches yielded nothing), it does solve this problem, but creates the problem at the bottom of the page ^^

[Terdious]

@pierre-gilles

I’m trying to reproduce it but even after removing the overflow:hidden, it works

Put lots of boxes ^^ and fill them ^^

[pierre-gilles]

Sorry, I’ve filled it to the max, it works perfectly ^^ Do you have another tip to reproduce it?

I’m on Chrome

[pierre-gilles]

Ok, I understand, the bug only happens in French

I was in English

[Terdious]

Raaaa ^^ but yes, the longer sentences

I just did some more tests, I think it’s all the boxes that use React tools!! (At first glance it seems to be import Select from 'react-select';)

I have the issue with the boxes:

• Devices
• Devices in the room
• Charts

And that’s it

[pierre-gilles]

I think that anyway the breakpoint is too low — 992px is tiny to switch to vertical, you can’t see anything at all in 3 columns, it’s unusable anyway.

I tested by changing to:

@media (max-width: 1280px) {

And that resolves the issue in French

So, it switches to vertical display at 1280px, which I find much more realistic

[pierre-gilles]

For this kind of issue, I find ChatGPT pretty dumb — it gives hacky, slapped-together solutions, whereas usually you just need to sit down and rethink the thing

[pierre-gilles]

(I should point out that 1280px wasn’t chosen at random, it’s in the theme we use, it’s the XL breakpoint)

[Terdious]

@pierre-gilles

For this kind of issue, ChatGPT is pretty dumb I think, it gives hacky, slapdash solutions, where usually you just need to sit down and rethink the thing

Totally agree!!

However with the 3 boxes mentioned, I still have the issue… :

@Terdious

I have the issue with the boxes:

• Devices
• Room devices
• Graphs

[pierre-gilles]

@Terdious

However, with the three boxes mentioned, I still have the issue… :

It must be because the feature title « MQTT device (MQTT temperature feature) » is extremely long

You need to check that this kind of title wraps correctly to the next line when it is too long

[pierre-gilles]

Weird, I’m not having the issue, actually:

[Terdious]

I removed it but no ^^

It really happens as soon as you put one of the 3 mentioned boxes in one column and not in another and you have devices selected. But if I remove them (just the selected features that I take out of the box, basically), it evens out…

It’s hard to reproduce, but I’ve done several reproductions here with different configurations!!

[pierre-gilles]

@Terdious

that you have selected devices. But if I remove them (just the selected features that I remove from the box, you know), it evens out …

Sorry but it doesn’t happen for me ^^ everything works!