185 new tab format

[seanmunson]

• style colors
• style button shapes
• style selected / unselected
• add opacity / transparency variation to selected tab.
• reduce height of button slightly.
• align arrows

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clearsky-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 30, 2025 0:51am

[thieflord06]

Passes functionality checks.

[thieflord06]

After looking at this some more, can you add < > to the ends to indicate scrolling is available?

At least for mobile where the whole thing wouldn't usually show.

[thieflord06]

I see that it does have arrows but it seems to only show at certain sizes.

Recording.2025-01-28.211836.mp4

[seanmunson]

So it looks like ... the Arrows only show when ...

a: There is scrolling to be done (and only on the side where there is 'extra' stuff off to that side)
b: The operation idiom is phone, not workstation

For what it's worth, the mobile-first model matches the operations on bluesky ... I will see what I can do to make it look 'scrollier' on mobile this morning.

To be fair, the more tabs we add the fewer times that there will be no arrows on both sides.

[seanmunson]

Made arrows visible on mobile

It does look like both the arrows can't be made visible when at the extreme ends of the scroll range. Fortunately, it doesn't hop or jump or bump - it just makes the arrows invisible.

[thieflord06]

Scrolling functionality has been lost.

[CrystalRiveraDesign]

I recommend changing the size of those dividers to only twice the size of the font used inside of them.
Via Discord, the Twitch tab reference is a great idea, putting a line underneath to highlight the chosen option.