fix: Tabs overflow handling

[ieedan]

Currently the tabs component uses flex-wrap so the tabs stack on overflow.

• Updated the tabs component to properly handle horizontal scrolling
• Added no-scrollbar class to hide the scrollbar
• Added preBlur and postBlur to show the user that there is more content to be scrolled.
• Added example with overflow (Vercel doesn't have this so I can axe it after review if necessary)

[github-actions[bot]]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
geist	✅ Ready (View Log)	Visit Preview	ca67518a605f07d55777471a6ad3d71e7014aea1

[ieedan]

Thanks I should have some updates in an hour or two once I get back from lunch

[ieedan]

I tried a few of the solutions you sent I couldn't find anything much better than what I already have. I darkened up the shadow though so now it is more visible.

• Added transitions to in and out of blurs
• Resize handler
• blur_overflow Prop to allow for turning off the blurring

To make it work I have to wrap it in a <div class="relative"> which isn't very nice.

Let me know what you think!

[shyakadavis]

Hey, @ieedan

You're right. No easy solution would have worked without adding an unnecessary div, so instead of foregoing on the indicate overflow bit, let's use a mask instead. I know adding a package for just a mask is overkill, but I suspect this will come in handy in other places/future, and for what it's worth, the plugin is only a few lines-ish.

https://github.com/pyncz/tailwind-mask-image

Before with blur:

After with mask:

[ieedan]

Yeah that looks much better

[ieedan]

I think we need 2 masks for situations like this

[shyakadavis]

Ah, I see. Sorry for missing this.

Mind opening a follow-up P.R please? I was working on the Table component, and might get to it late.

[ieedan]

Yeah np.

I think this is too much?

[shyakadavis]

Might be indeed. 😅 Even if we were to reduce the mask-point-to-[{percetage}] it could still be too much. 🤷

[ieedan]

I am gonna play with it a bit more hopefully I can get it to match up with what we have already

[ieedan]

This looks much closer Both:

Post:

[ieedan]

My best idea at this point is to use a Pseudo-element to do this.

In a perfect world I could just overlay a ::before element with its own mask on top but this has not been very easy.

I am having a lot of trouble doing this right now and even if I can get the classes to apply we would still need to apply it to a parent container of the tabs because it moves during scroll.

I think I'll have to circle back at another time.