fix: ensure NavTabs slider aligns correctly with dynamic tabs (#5377)

* fix(ui): ensure NavTabs slider aligns correctly with dynamic tabs

* fix: lint

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

Author: IsQuyet

apps/frontend/src/components/ui/NavTabs.vue

@@ -191,12 +191,20 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } {
 }
 
 function getTabElement(index: number): HTMLElement | null {
-	if (!tabLinkElements.value?.[index]) return null
+	if (index === -1) return null
 
-	// In navigation mode, elements are NuxtLinks with $el property
-	// In local mode, elements are plain divs
-	const element = tabLinkElements.value[index]
-	return props.mode === 'navigation' ? (element as any).$el : element
+	const container = scrollContainer.value as HTMLElement | undefined
+	if (!container) return null
+
+	const tabs = container.querySelectorAll('.button-animation')
+	const element = tabs[index] as HTMLElement | undefined
+
+	if (!element) return null
+
+	// In navigation mode, elements are NuxtLinks, but since we used querySelectorAll,
+	// we already have the raw HTMLElement ($el), so no further conversion is needed.
+	// In local mode, elements are already plain divs.
+	return element
 }
 
 function positionSlider() {
@@ -253,7 +261,8 @@ function animateSliderTo(newPosition: {
 	sliderBottom.value = newPosition.bottom
 }
 
-function updateActiveTab() {
+async function updateActiveTab() {
+	await nextTick()
 	const { index, isSubpage } = computeActiveIndex()
 	currentActiveIndex.value = index
 	subpageSelected.value = isSubpage