Make the pager take full width

[gaearon]

This changes the pager to always fill the entire screen width by spacing out the items. If there are many items (more than a screen's worth), then they are placed like before.

Easier to understand from a demo:

ios.mov

Test Plan

Try these on iOS, Android, and web.

• Check Home the new user experience (Discover, Following)
• Check Home for a user with a lot of feeds
• Check profile tabs (own and others')
• Check hashtag and search screens
• Try it on top of [Notifications] Add a Mentions tab #7044

Centered item looks a bit weird when there's a single tab but the only case of that is being solved by #7056.

[github-actions]

Old size	New size	Diff
6.77 MB	6.77 MB	285 B (0.00%)

---

[mozzius]

Looks good, in stylistic terms I think making the blue indicator a little bit wider than the text would be nice

[gaearon]

I'll get this in as is but can iterate

[auroursa]

It’s possible that the shorter length of Chinese text caused the strange width gap that appeared after this PR. Sorry for the Chinese in the screenshot, but I wanted to more cleared show this change.

Before	After

[gaearon]

Would it be desirable to remove the minimum width for Chinese characters?

[auroursa]

Worth a try, this should not cause any other issues. It seems that Korean and Hindi also have the same issue, as their words are quite short. Perhaps we should reconsider the minimum width for this layout?

[gaearon]

Maybe instead of minimum width we could do something else in styling? The intention is to avoid the line being too short when it’s just a few items, like “All” and “Mentions” making “All” very short.

[gaearon]

Fixed in #7095