Recognize wide compose files and change UI accordingly

[AlexBrightwater]

⚠️ Please verify that this feature request has NOT been suggested before.

• I checked and didn't find similar feature request

🏷️ Feature Request Type

UI Feature

🔖 Feature description

I migrated to Dockge and everything was working great. The only problem I have is, that my traefik compose file is very wide. This leads to line wrapping on multiple lines which is unfortunate (24" Monitor).

✔️ Solution

The UI recognizes when there are multiple lines in the compose files that are wrapping and upon noticing that, the UI changes to a single column layout instead of the two columns that are there by default.

Another solution could be a slider with which a user can change the sizes of the components themselves.

Another another solution would reducing the font-size to accommodate longer lines.

❓ Alternatives

Do nothing and live with the line wrapping. 😢

📝 Additional Context

I think the best solution would be a combination of the solutions.

[eded333]

I made a solution for myself to solve this issue. I added this lines to ublock, on my filters, to modify the ui and made it vertical instead of horizontal:

yourdockgeIPorHost##div.col-lg-6:style(max-width: none !important; width: 100% !important)
yourdockgeIPorHost##div.container.mb-3.big-padding.shadow-box:style(max-width: none !important; width: 100% !important)

To change from horizontal to vertical you enable ublock and reload the page, to go back you disable it and reload the page.

Hope this helps!

Before the "fix":

After the "fix":

You could even gain more real state if you reduce the size of the left column and add it to the right one:
yourdockgeIPorHost##.col-xl-3.col-md-4.col-12:style(width: 12% !important)
yourdockgeIPorHost##.mb-3.col-xl-9.col-md-8.col-12:style(max-width: none !important; width: 88% !important)

To increase the text size of the stack editor you can:
yourdockgeIPorHost##.editor-box.mb-3.shadow-box:style(font-size: 18px !important)

And log:
yourdockgeIPorHost##.xterm-rows:style(font-size: 16px !important)

Just edit the px to your liking

It would be great of this could be customized from inside dockge but alas, this is a workaround for the time being.

[AlexBrightwater]

From that, I created a a little css snippet and uploaded it to userstyles.world
It only kicks in up to a window width of 1920px.
Its plain CSS. So if anyone is not using Stylus or any other compatible extension, they can just take it and put it in where they can use it.

--> https://userstyles.world/style/15215/two-column-layout

[fabianmuehlberger]

Hey, looks nice!
I am not a frontend guy, where would I store your snippet?

[EDIT]:
I just noticed that this snippet has nothing to do with dockge, but is a style managed in an add-on. But it works :)

Best