Update manager.css

[SamuelPlentz]

The sidebar currently has a fixed width of 220px. This works well for smaller window sizes (~950px), but on larger screens (e.g., Full HD) the sidebar remains unnecessarily narrow.

It might be better to let the sidebar scale with the viewport width while keeping the same proportions. This CSS-changes work fine for me. (It keeps the current layout for smaller screens but allows the sidebar to grow on larger displays.)

[jobisoft]

There is a dependency on the calculated with for adding the ... if the names are too long. Is this adjusted as well? Or is there a better approach, to not have the cut-off width hardcoded?

[SamuelPlentz]

Yes.

The sidebar previously had a fixed width of 220px. It now scales to 23% of the viewport width when the window becomes larger.

The tree-name element previously had a max-width of 170px, which controlled when the text was truncated with "...". This value is now calculated dynamically as the sidebar width minus 50px.

Similarly, the source-list max-width was previously fixed at 200px. It is now calculated from the sidebar width minus 20px.

[SamuelPlentz]

Another idea proposed by ChatGPT - untested:

:root {
  --sidebar-width: max(220px, 23vw);
}

.sidebar {
  width: var(--sidebar-width);
  ...
}

.tree-name {
  ...
  max-width: calc(var(--sidebar-width) - 50px);
}

.source-list li {
  ...
  max-width: calc(var(--sidebar-width) - 20px);
}

[jobisoft]

I made significant changes to the manager UI, but would like to release this as part of v6.5.4. Could you rebase the PR to current main?

[SamuelPlentz]

Wait.

[jobisoft]

I will replace the "add group" and "add template" buttons by icons. They are currently bigger since I added padding, but I do not want them on two rows. If it is that which you stumbled upon.

[SamuelPlentz]

No my solution (as the current version) had flaws with a very long script name.

Restrict containers instead of items in containers.

This is fine now.

[SamuelPlentz]

Btw: I really like the colored Buttons.