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

4
src/components/Tabs/index.tsx

@ -32,7 +32,7 @@ export default function Tabs({ @@ -32,7 +32,7 @@ export default function Tabs({
if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
const activeTab = tabRefs.current[activeIndex]
const { offsetWidth, offsetLeft } = activeTab
const padding = 48 // 24px padding on each side
const padding = 24 // 12px padding on each side
setIndicatorStyle({
width: offsetWidth - padding,
left: offsetLeft + padding / 2
@ -67,7 +67,7 @@ export default function Tabs({ @@ -67,7 +67,7 @@ export default function Tabs({
return (
<div
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)]' : ''
)}
>

Loading…
Cancel
Save