Basic UI: remove max-width for buttons

[jimtng]

Utilise the wasted space instead of wrapping the buttons into multiple rows

before:

After:

With lots of buttons:
Before:

After:

[lolodomo]

The idea was to keep a minimum of place for label and value.

[lolodomo]

Your commit of vscode settings is probably unexpected ?

[jimtng]

The idea was to keep a minimum of place for label and value.

I haven't tested this with various widths of labels.

Your commit of vscode settings is probably unexpected ?

oops, removed now.

[jimtng]

The idea was to keep a minimum of place for label and value.

Reserving space for the label and value has merits too. I see that simply removing the width here is not enough.

Before:

After (bad for the label):

I'll play with it a bit more, and I'm open to ideas

[lolodomo]

Using 4.2 M1, I can see that I have to increase the zone for buttons to not have controls for a Player item cut on 2 lines on a phone.

And I also see that the buttons in the new settings page are not rendered perfectly on a phone when cut on 2 lines.

[jimtng]

I haven't had a chance to look into this yet, and I'm generally clueless with css. If you have a fix, feel free post it and close this PR.

Ideally, the buttons can take up as much horizontal space as possible, especially when there are no labels or the label is short. This way user can set a blank label to maximise the space for the buttons. But when there's a label, then reserve some space for the label.

[lolodomo]

Even with your change, I have strange result like this one:

If I increase just a little the window, it is then OK:

Maybe the problem occurs when the label is truncated and "..." is injected ?

[lolodomo]

I would like to find the proper CSS properties to at least have player controls always on one line when there is enough place for that.

[lolodomo]

If I reduce the length of my label, this is then fine:

The problem seems to be when the label is truncated.

[jimtng]

The solution would probably include changing the css of the labels and/or the container.
Could we perhaps turn it into two lines (dynamically) when there's not enough space? So the label on top, then controls below it, but if there's enough space, keep them both in one line.