fix: ensure indicator style is calculated after tabs are rendered

src/components/NoteInteractions/Tabs.tsx

@@ -20,16 +20,18 @@ export function Tabs({
   const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
 
   useEffect(() => {
-    const activeIndex = TABS.findIndex((tab) => tab.value === selectedTab)
-    if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
-      const activeTab = tabRefs.current[activeIndex]
-      const { offsetWidth, offsetLeft } = activeTab
-      const padding = 32 // 16px padding on each side
-      setIndicatorStyle({
-        width: offsetWidth - padding,
-        left: offsetLeft + padding / 2
-      })
-    }
+    setTimeout(() => {
+      const activeIndex = TABS.findIndex((tab) => tab.value === selectedTab)
+      if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
+        const activeTab = tabRefs.current[activeIndex]
+        const { offsetWidth, offsetLeft } = activeTab
+        const padding = 32 // 16px padding on each side
+        setIndicatorStyle({
+          width: offsetWidth - padding,
+          left: offsetLeft + padding / 2
+        })
+      }
+    }, 20) // ensure tabs are rendered before calculating
   }, [selectedTab])
 
   return (

src/components/Tabs/index.tsx

@@ -27,10 +27,16 @@ export default function Tabs({
   useEffect(() => {
     const handleResize = () => {
       const activeIndex = tabs.findIndex((tab) => tab.value === value)
+      if (tabs.length === 4) {
+        console.log('notification tabs', activeIndex, value)
+      }
       if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
         const activeTab = tabRefs.current[activeIndex]
         const { offsetWidth, offsetLeft } = activeTab
         const padding = 24 // 12px padding on each side
+        if (tabs.length === 4) {
+          console.log('notification tabs', offsetWidth, offsetLeft, padding)
+        }
         setIndicatorStyle({
           width: offsetWidth - padding,
           left: offsetLeft + padding / 2
@@ -38,7 +44,7 @@ export default function Tabs({
       }
     }
     window.addEventListener('resize', handleResize)
-    handleResize() // Initial call to set the indicator style
+    setTimeout(() => handleResize(), 20) // ensure tabs are rendered before calculating
     return () => {
       window.removeEventListener('resize', handleResize)
     }