fix(ui): adjust tablist item width for compose services

[nktnet1]

Looks like "Volume Backup" was introduced recently, causing some UI issues.
The changes here is to simply to use the same tab list logic in compose as applications.

Before

After

[gentslava]

@Siumauricio this PR will hide Logs, Monitoring, Advanced tabs. Because with grid-col-7 it will be 2-row grid with overflow-y-hidden.

Solutions is simple - just use display flex with overflow auto like Application does.

I will send PR with improvements.

[gentslava]

#2156

[nktnet1]

Hi @gentslava,

Regarding

This PR will hide Logs, Monitoring, Advanced tabs. Because with grid-col-7 it will be 2-row grid with overflow-y-hidden.

Which operating system and browser are you using?

I've tested on both Chrome and Zen/Firefox (on Linux + MacOS) and can't reproduce - unless I'm misunderstanding the issue.

For example, here's what I see:

output.webm

[gentslava]

Hi @gentslava,

Regarding

This PR will hide Logs, Monitoring, Advanced tabs. Because with grid-col-7 it will be 2-row grid with overflow-y-hidden.

Which operating system and browser are you using?

I've tested on both Chrome and Zen/Firefox (on Linux + MacOS) and can't reproduce - unless I'm misunderstanding the issue.

For example, here's what I see:

output.webm

Well I see you got display flex and grid-cols together for what? These are parameters in CSS that don't work with each other.
I didn't notice that you not only changed grid-cols-10, but also changed the layout. That's why I got this bug. Anyway, I fixed this and other tablist issues in my PR.

[nktnet1]

The change was just copying the TabList from the application file to the compose file so that they're consistent, as mentioned in the original PR.

If you're making an improvement to one, you should probably do the same for the other.

Now, as per my response and video, the issue you've mentioned isn't reproducible on my end. Not saying it doesn't exist on some system and should not be fixed - this was why I asked for your operating system and browser to see if it can be reproduced.

[gentslava]

The change was just copying the TabList from the application file to the compose file so that they're consistent, as mentioned in the original PR.

If you're making an improvement to one, you should probably do the same for the other.

Now, as per my response and video, the issue you've mentioned isn't reproducible on my end. Not saying it doesn't exist on some system and should not be fixed - this was why I asked for your operating system and browser to see if it can be reproduced.

Yes, I made changes to both parts: to compose and to application.
I've already explained that the original problem with some tabs being hidden doesn't exist because it's a display flex layout, not a grid. But there are other issues that I've fixed, including conflicting grid props and flex layout.

[nktnet1]

I've already explained that the original problem with some tabs being hidden doesn't exist

Nothing in your response to my comment containing the video "explained" that the original problem you reported, simply wasn't a problem.

Either way, glad we now get a resolution on this, i.e. no tabs were actually hidden by the new code in this PR, which simply copies the code from application to compose to make them consistent and address the text overflow issue.

[gentslava]

I've already explained that the original problem with some tabs being hidden doesn't exist

Nothing in your response to my comment containing the video "explained" that the original problem you reported, simply wasn't a problem.

Either way, glad we now get a resolution on this, i.e. no tabs were actually hidden by the new code in this PR, which simply copies the code from application to compose to make them consistent and address the text overflow issue.

This is indeed true. I have already explained that the initial report was due to human error (inattention):

I didn't notice that you not only changed grid-cols-10, but also changed the layout. That's why I got this bug.

So there are no complaints against you here. Just improving the layout of this part of the application.