ScrollShadow with Tabs.ScrollView leaves a right gap

[eliotgevers]

Hi, I tried adding ScrollShadow to a horizontal Tabs.ScrollView in heroui-native to make overflow tabs more obvious, but it left a visible gap on the right edge where part of the tab row still shows through.

Am I using this wrong, or should ScrollShadow already work cleanly with Tabs.ScrollView?

What I tried:

<Tabs.List className="self-stretch overflow-hidden">
  <ScrollShadow className="w-full" orientation="horizontal" size={18} LinearGradientComponent={LinearGradient}>
    <Tabs.ScrollView className="w-full" contentContainerClassName="gap-2" showsHorizontalScrollIndicator={false}>
      <Tabs.Indicator className="top-[3px]" />
      {/* tab triggers */}
    </Tabs.ScrollView>
  </ScrollShadow>
</Tabs.List>

This extra top-[3px] hack fixes the selected-tab vertical offset on my side, but it is not a nice solution.

A simple built-in prop on Tabs/Tabs.ScrollView to enable or disable an edge fade/shadow would be great, because sometimes labels align at the end and it does not look like there is more to discover on the right.

[ammarmbe]

I think you have to set the ScrollShadow color to the background color of the Tabs, as the default ScrollShadow color is background but the background color for the Tabs is default

const defaultColor = useThemeColor("default");

<Tabs.List className="self-stretch overflow-hidden">
  <ScrollShadow color={defaultColor} className="w-full" orientation="horizontal" size={18} LinearGradientComponent={LinearGradient}>
    <Tabs.ScrollView className="w-full" contentContainerClassName="gap-2" showsHorizontalScrollIndicator={false}>
      <Tabs.Indicator className="top-[3px]" />
      {/* tab triggers */}
    </Tabs.ScrollView>
  </ScrollShadow>
</Tabs.List>

[eliotgevers]

But that still does not explain the gap, right?

[ammarmbe]

I'm not entirely sure but I think if you do it like this the gap won't be visible and so it won't be an issue. It'll look like the ScrollView just faded out

[vvv-sss]

Tabs.List has the p-[3px] className on the primary variant. Honestly, I wouldn't say this is the intended use case for ScrollShadow. Tabs.List with the primary variant isn't designed to be used with it.

[eliotgevers]

Thanks for clarifying, that makes sense about primary + ScrollShadow not being the intended combo.

Would you be open to reconsidering this from a UX perspective? I’ve had multiple users not realize there were more tabs because the right side had no visual hint of overflow. If not, no worries, heroui native is already awesome!

[vvv-sss]

I will think about it. Thanks for your feedback!