Primary tabs are too wide and blue border looks partially greyed

I guess some design proposals expected here, since figma has only case with 3 tabs.
Also would be nice to review mobile tabs as well

Yeah, we probably use something like intersection observer or resize observer to work with it.

But for it to work without JS (which would be nice), we could also just let them wrap.

Re #3:

So when there's not enough space to display all tabs in primary tabs horizontally, they should be displayed vertically like in mobile.

Honestly i don't think it's good idea at all. We may have a case sometimes when we don't have enough space on large screens. Check screenshot:

So if we will switch it on dropdown, where tabs will be displayed like 1 tab per 1 row, it will be too wide tabs. Also i believe we have to evade js solution in all places where possible.

Re #4:

we could also just let them wrap

Well it doesn't look too good right now if to let them wrap. There is a mess with side borders, check screenshot:

So we need design proposals here as i said, maybe we can make these tabs less size than now, or let them wrap, but add top/bottom borders, or smth.

It's never going to look good when it wraps, but it can look better. Instead of adding a background color on the parent element, we could add it on the list items themselves, and give it a slight bottom margin. Thoughts?

@mherchel i really like your proposed solution

Gonna manage this task

I would add the following:
Maybe we can differentiate a little bit more the primary and secondary tabs design. This is because, like it is, a lambda/new user will have some pain to understand the fact that primary tabs are structurally more important (like <h1> and <h2>)

Some ideas:
-Primary: Uppercase vs Secondary: Sentence case (or lowercase) [and/or font size smaller]
-Primary: background vs Secondary:no background
-Primary: vertical border vs Secondary: no border

We can also decrease some padding/margin if necessary

I would suggest the following:

This is really better! +1

The patch in #9 looks good, but doesn't match the designs in #11 (#11 has a white background). Is there still work going on? I think we should move the secondary tabs task to a followup issue.

Ready for review.

Mobile tabs:

Desktop:

Looking good! Committed!