mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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