hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: adjust padding and alignment in Tabs component

Browse source
This commit is contained in:
codytseng 2025-08-04 23:07:02 +08:00
parent 21f09426cf
commit 9dd38ac439
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Tabs/index.tsx
View file

@ -26,7 +26,7 @@ export default function Tabs({
return (
<div
className={cn(
'sticky flex top-12 p-1 bg-background z-30 w-full transition-transform',
'sticky flex top-12 bg-background z-30 w-full transition-transform',
deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : ''
)}
>
@ -45,14 +45,16 @@ export default function Tabs({
</div>
))}
<div
className="absolute bottom-0 px-4 transition-all duration-500"
className="absolute bottom-0 left-0 transition-all duration-500"
style={{
width: `${100 / tabs.length}%`,
left: `${activeIndex >= 0 ? activeIndex * (100 / tabs.length) : 0}%`
}}
>
<div className="px-4">
<div className="w-full h-1 bg-primary rounded-full" />
</div>
</div>
</div>
)
}