Discussion on the page width of "tableau de bord" and "Scène"

Hi everyone,

Following feedback from @Prof_Techno about the width of the « Scene » view, I’d like to propose changes to the maximum width of the « Scene » view and the « Dashboard », because these screens currently don’t handle large displays very well :slight_smile:

The idea is to allow a wider use of the screen on large displays (>1280px width).

I’d like to propose the following changes (before/after):

Screenshot 2025-12-08 at 10.00.05
Screenshot 2025-12-08 at 09.59.52

Screenshot 2025-12-08 at 10.00.11
Screenshot 2025-12-08 at 10.00.17

If you use Gladys Plus, you can test it at home with this link:

https://larger-container-scene-dashb.gladys-plus.pages.dev

The PR:

What do you think?

I tested it and it looks really good on a large screen :slight_smile:
I haven’t found any bugs so far

1 Like

Great news!! It will save me from having to tinker with the CSS when I work on the scenes

1 Like

For my part I just tested it and I’m rather mixed

In principle it’s super cool because it makes good use of the full width of the screen, but at a high resolution (3440x1440) the widgets are flattened and I find the rendering is not great and frankly I don’t like it

Here are some examples:

image

image

If you compare the two versions you lose display height and you lose consistency between the menu and the alignment of the widgets
image

image

Well, it’s rare that Gladys is full screen on my PC; most of the time when I use Gladys it’s on my phone or on a tablet… but if I had to choose today I’d keep the old version because I prefer everything to be well aligned with good proportions rather than widening the widgets just to fill the empty space

Indeed, in your case it’s really not pretty. I think we should set a maximum width so it doesn’t look squashed on ultra-wide screens.

Some kind of compromise between the current configuration and the « width at 100% ».

Currently we are at 1200px max width, I think we could increase it to 1600-2000px (to be tested).

Can you test to see at what point it starts to look really too squashed?

In your browser, by opening the inspector, there’s a tool to test responsiveness:

Screenshot 2025-12-09 at 08.39.47

I’ll check tonight when I’m at home

Would it be possible to separate the scene design part, from the dashboard?

And if the screen is very wide, we could perhaps provide a fourth column, or even more if necessary for the dashboards?

That’s possible; otherwise, for the scenes we could even have an « expand the screen » button like Notion does, for example

For the columns on the dashboard, the issue is that if we put 4 columns, it becomes unreadable on a small screen.

2 Likes

Here’s the dashboard at 2000px
image

at 2200px
image

at 2400px
image

at 2600px
image

For me, 2000px works well.

You can also see there’s a difference in the left alignment of the text
image

For the scenes, here’s how it looks at full width
image

Personally I find it looks big compared to the size of the menu above.
The Duplicate / Delete buttons at the top right and the Start / Save buttons below — it might be better if the bottom buttons were also aligned to the right.

A button to expand the display seems like a good idea

2 Likes

Great news about this work. We’ve been talking about it for years, so I’m fully convinced of the necessity.

  1. The top banner should also follow the widening; as it stands, the rendering is jarring.

  2. For me it’s perfect, whether at 1920 or 3440, I find it much more pleasant, and indeed some widgets may not be adapted yet, and maybe each widget’s presentation needs to be reviewed, but it’s so much better for most.

  3. However, I think there should be a small

From my research, it wasn’t best practice, but I can dig deeper!

I think I’ll propose again a version between what we currently have in production (max-width: 1200px) and my proposal at the start of this post (max-width: 100%), for example a max-width: 1800px or 2000px.

That will be a first step!

3 Likes

So personally I have this

image

image

and I only changed one parameter :

image

in this line

image

I set it to 90% but 95% works too

1 Like