Add priority menu to tabs

[xoxys]

Supersedes: #4610
Fixes: #2162 (comment)

Adds a priority plus menu to tabs that contains all tabs items that don't fix into the available screen size. The wordwrap issue seen in one of the demo videos was fixed already.

Bildschirmaufzeichnung.vom.2024-12-29.15-07-34.mp4

Bildschirmaufzeichnung.vom.2024-12-29.15-07-57.mp4

[pat-s]

I agree this is a better one, thanks for putting the effort in.

Can we use horizontal dots instead of vertical ones? This should also be the common default for other sites.

[xoxys]

Sure I can but without a border around the button and beside text this variant looks better IMO. And a lot of mobile apps use vertical docs e.g. GitHub, Firefox, Mastodon

[xoxys]

@pat-s you would still prefer horizontal dots?

[pat-s]

I can also live with vertical ones if you have a strong preference for it.

Yet this is what I see on iPhone 15 (safari) with default settings:

This is caused if the language is "german" as the "pipeline ausführen" button is then too large and collapses everything on the left. The dots then expand to the left and leave the screen.

Would it be complicated to enforce showing at least one item at all times? This would then avoid the menu issue going out of bounds and improve the overall feel.

[xoxys]

Good catch, will fix that case.

[xoxys]

@anbraten as your javascript knowledge is way better than mine your feedback would be very welcome.

[pat-s]

@xoxys Do you want to wait here until @anbraten replied?

[xoxys]

No we can proceed IMO. Can be improved later as well if there is any feedback.

[pat-s]

@xoxys Leaving the conflicts to you.

[pat-s]

The duration infos should be place above the row containing the menu? I am not sure if you wanted to do this on purpose to save space or if this is an undesired change?

[xoxys]

Fixed it:

Bildschirmaufzeichnung.vom.2025-01-08.22-50-54.mp4

[xoxys]

I also adjusted the drop down:

The counter badge was removed intentionally due to the limited space.

[pat-s]

Thanks! The only last nit I would have is that the menu doesn't vanish if one clicks on an element outside the menu that is within the overall tab list (e.g. 'tasks' or 'errors').
Seems like a niche/edge case, I am also fine with the current state!

[xoxys]

Lets fix it before merge. Should be easy enough :)

[pat-s]

Feels great now!

(and just a "little bit" of work in the end 😆️)

[woodpecker-bot]

Tearing down https://woodpecker-ci-woodpecker-pr-4641.surge.sh