Browse Source

fix: adjust padding for tab indicator

imwald
codytseng 7 months ago
parent
commit
68d0c85dd2
  1. 1
      src/components/KindFilter/index.tsx
  2. 4
      src/components/Tabs/index.tsx

1
src/components/KindFilter/index.tsx

@ -72,7 +72,6 @@ export default function KindFilter({
<Button <Button
variant="ghost" variant="ghost"
size="titlebar-icon" size="titlebar-icon"
className="mr-1"
onClick={() => { onClick={() => {
if (isSmallScreen) { if (isSmallScreen) {
setOpen(true) setOpen(true)

4
src/components/Tabs/index.tsx

@ -32,7 +32,7 @@ export default function Tabs({
if (activeIndex >= 0 && tabRefs.current[activeIndex]) { if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
const activeTab = tabRefs.current[activeIndex] const activeTab = tabRefs.current[activeIndex]
const { offsetWidth, offsetLeft } = activeTab const { offsetWidth, offsetLeft } = activeTab
const padding = 48 // 24px padding on each side const padding = 24 // 12px padding on each side
setIndicatorStyle({ setIndicatorStyle({
width: offsetWidth - padding, width: offsetWidth - padding,
left: offsetLeft + padding / 2 left: offsetLeft + padding / 2
@ -67,7 +67,7 @@ export default function Tabs({
return ( return (
<div <div
className={cn( className={cn(
'sticky flex justify-between top-12 bg-background z-30 w-full transition-transform', 'sticky flex justify-between top-12 bg-background z-30 px-1 w-full transition-transform',
deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : '' deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : ''
)} )}
> >

Loading…
Cancel
Save