fix: align active category chip with fully visible cards

Update category activation to prioritize sections that have at least
one fully visible card inside the effective viewport (accounting for
the sticky chip bar offset). Keep geometry fallback for edge cases and
add unit tests for the new selection heuristic.

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>

Author: vitormattos

src/tests/views/Settings/PolicyWorkbench/useNavigation.spec.ts

@@ -6,7 +6,7 @@
 import { mount } from '@vue/test-utils'
 import { defineComponent, h } from 'vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { useNavigation } from '../../../../views/Settings/PolicyWorkbench/Catalog/composables/useNavigation'
+import { pickCategoryWithFullyVisibleCard, useNavigation } from '../../../../views/Settings/PolicyWorkbench/Catalog/composables/useNavigation'
 
 function createRect(top: number): DOMRect {
 	return {
@@ -23,6 +23,47 @@ function createRect(top: number): DOMRect {
 }
 
 describe('useNavigation', () => {
+	it('prefers the section with a fully visible card over one with only partial cards', () => {
+		const selected = pickCategoryWithFullyVisibleCard([
+			{
+				key: 'signer-experience',
+				cardRects: [{ top: 80, bottom: 150 }],
+			},
+			{
+				key: 'what-gets-recorded',
+				cardRects: [{ top: 170, bottom: 240 }],
+			},
+		], 160, 320)
+
+		expect(selected).toBe('what-gets-recorded')
+	})
+
+	it('accounts for sticky chips area by requiring card top below viewport top cutoff', () => {
+		const selected = pickCategoryWithFullyVisibleCard([
+			{
+				key: 'signer-experience',
+				cardRects: [{ top: 110, bottom: 180 }],
+			},
+			{
+				key: 'what-gets-recorded',
+				cardRects: [{ top: 142, bottom: 212 }],
+			},
+		], 140, 320)
+
+		expect(selected).toBe('what-gets-recorded')
+	})
+
+	it('returns null when no card is fully visible', () => {
+		const selected = pickCategoryWithFullyVisibleCard([
+			{
+				key: 'what-gets-recorded',
+				cardRects: [{ top: 130, bottom: 230 }],
+			},
+		], 150, 220)
+
+		expect(selected).toBeNull()
+	})
+
 	function createHarness() {
 		const Harness = defineComponent({
 			setup(_, { expose }) {

src/views/Settings/PolicyWorkbench/Catalog/composables/useNavigation.ts

@@ -13,6 +13,41 @@ const CATEGORY_SCROLL_ALIGNMENT_GAP_PX = 12
 const SECTION_OBSERVER_BOTTOM_MARGIN_PERCENT = 45
 const NAVIGATION_LOCK_MS = 900
 
+type RectBounds = {
+	top: number
+	bottom: number
+}
+
+type CategoryCardVisibility = {
+	key: RealPolicySettingCategory
+	cardRects: RectBounds[]
+}
+
+export function pickCategoryWithFullyVisibleCard(
+	categories: CategoryCardVisibility[],
+	viewportTop: number,
+	viewportBottom: number,
+): RealPolicySettingCategory | null {
+	let selectedCategory: RealPolicySettingCategory | null = null
+	let selectedTop = Number.POSITIVE_INFINITY
+
+	for (const category of categories) {
+		for (const rect of category.cardRects) {
+			const isFullyVisible = rect.top >= viewportTop && rect.bottom <= viewportBottom && rect.bottom > rect.top
+			if (!isFullyVisible) {
+				continue
+			}
+
+			if (rect.top < selectedTop) {
+				selectedTop = rect.top
+				selectedCategory = category.key
+			}
+		}
+	}
+
+	return selectedCategory
+}
+
 export function useNavigation(
 	visibleCategorySections: { value: Array<{ key: RealPolicySettingCategory }> },
 ) {
@@ -115,7 +150,60 @@ export function useNavigation(
 		return Math.max(0, Math.round(activationLine - containerRect.top))
 	}
 
+	function categoryDetectionViewportBounds(): RectBounds {
+		const top = categoryActivationLinePx() + CATEGORY_SCROLL_ALIGNMENT_GAP_PX
+		if (scrollContainer.value instanceof Window) {
+			return { top, bottom: window.innerHeight }
+		}
+
+		if (typeof scrollContainer.value.getBoundingClientRect === 'function') {
+			return {
+				top,
+				bottom: scrollContainer.value.getBoundingClientRect().bottom,
+			}
+		}
+
+		return { top, bottom: top + 1 }
+	}
+
+	function collectCategoryCardRects(): CategoryCardVisibility[] {
+		const categories: CategoryCardVisibility[] = []
+
+		for (const section of visibleCategorySectionsValue.value) {
+			const sectionElement = categorySectionElements.get(section.key)
+			if (!sectionElement) {
+				continue
+			}
+
+			const cards = sectionElement.querySelectorAll<HTMLElement>('.policy-workbench__setting-tile, .policy-workbench__settings-row')
+			const cardRects = Array.from(cards).map((card) => {
+				const rect = card.getBoundingClientRect()
+				return {
+					top: rect.top,
+					bottom: rect.bottom,
+				}
+			})
+
+			categories.push({
+				key: section.key,
+				cardRects,
+			})
+		}
+
+		return categories
+	}
+
 	function pickCategoryByGeometry(): RealPolicySettingCategory {
+		const viewport = categoryDetectionViewportBounds()
+		const byFullyVisibleCard = pickCategoryWithFullyVisibleCard(
+			collectCategoryCardRects(),
+			viewport.top,
+			viewport.bottom,
+		)
+		if (byFullyVisibleCard) {
+			return byFullyVisibleCard
+		}
+
 		const activationLine = categoryActivationLinePx()
 		let lastPassedIndex = -1