fix: account menu matches the redesigned board: System, Light, Dark stay in the menu and the sheet, and the visual-check exception on profile "Account menu" in web/visual/states.ts is removed

web/src/components/UserMenu.vue

@@ -4,6 +4,7 @@ import { useMediaQuery } from '@vueuse/core'
 import { colorModeOptions, useAccountMenu } from '@/composables/useAccountMenu'
 
 const DESKTOP_QUERY = '(min-width: 64rem)'
+const ITEM_CLASS = 'h-8 py-0'
 
 const props = defineProps<{
 	username: string
@@ -60,7 +61,7 @@ const items = computed(() => [
 		{
 			label: 'Profile',
 			icon: 'i-lucide-circle-user',
-			class: onProfile.value ? 'bg-elevated' : undefined,
+			class: onProfile.value ? `${ITEM_CLASS} bg-elevated` : ITEM_CLASS,
 			onSelect: goToProfile,
 		},
 	],
@@ -68,6 +69,8 @@ const items = computed(() => [
 		type: 'checkbox' as const,
 		label: option.label,
 		checked: colorMode.preference === option.value,
+		class: ITEM_CLASS,
+		onSelect: (event: Event) => event.preventDefault(),
 		onUpdateChecked: (checked: boolean) => {
 			if (checked) {
 				colorMode.preference = option.value
@@ -78,6 +81,7 @@ const items = computed(() => [
 		{
 			label: 'Log out',
 			icon: 'i-lucide-log-out',
+			class: ITEM_CLASS,
 			onSelect: () => emit('logout'),
 		},
 	],

web/src/components/__tests__/DashboardShell.spec.ts

@@ -4,6 +4,7 @@ import { createPinia, setActivePinia } from 'pinia'
 import uiPlugin from '@nuxt/ui/vue-plugin'
 import router from '@/router'
 import { useApi } from '@/composables/useApi'
+import { useColorMode } from '@/composables/useColorMode'
 import DashboardShell from '../DashboardShell.vue'
 import { DESKTOP_WIDTH, MOBILE_WIDTH, setViewportWidth } from './viewport'
 
@@ -272,6 +273,29 @@ describe('Account menu: opened from the drawer on mobile', () => {
 		expect(document.body.querySelector('[role="menu"]')).toBeNull()
 	})
 
+	it('applies a theme choice and closes the sheet', async () => {
+		const colorMode = useColorMode()
+		colorMode.preference = 'system'
+		await mountShell('/home', { width: MOBILE_WIDTH })
+		;(document.body.querySelector('[data-slot="toggle"]') as HTMLButtonElement).click()
+		await flushPromises()
+		;(
+			document.body.querySelector(
+				'[role="dialog"] button[aria-haspopup]',
+			) as HTMLButtonElement
+		).click()
+		await flushPromises()
+
+		const dark = Array.from(
+			document.body.querySelectorAll<HTMLElement>('[role="menu"] [role="menuitemcheckbox"]'),
+		).find((item) => item.textContent?.trim() === 'Dark')!
+		dark.click()
+		await flushPromises()
+
+		expect(colorMode.preference).toBe('dark')
+		expect(document.body.querySelector('[role="menu"]')).toBeNull()
+	})
+
 	it('logs out from the sheet', async () => {
 		await mountShell('/home', { width: MOBILE_WIDTH })
 		;(document.body.querySelector('[data-slot="toggle"]') as HTMLButtonElement).click()

web/src/components/__tests__/UserMenu.spec.ts

@@ -236,7 +236,7 @@ describe('Menu items', () => {
 })
 
 describe('Theme choice stays in the menu', () => {
-	it('checks the current preference, sets Dark, closes, and shows Dark checked on reopening', async () => {
+	it('checks the current preference, sets Dark at once and keeps the menu open', async () => {
 		const colorMode = useColorMode()
 		colorMode.preference = 'system'
 		await mountMenu()
@@ -248,15 +248,23 @@ describe('Theme choice stays in the menu', () => {
 		await flushPromises()
 
 		expect(colorMode.preference).toBe('dark')
-		expect(menu()).toBeNull()
-
-		await openMenu()
-
+		expect(menu()).not.toBeNull()
 		expect(findItem('Dark').getAttribute('aria-checked')).toBe('true')
 		expect(findItem('System').getAttribute('aria-checked')).toBe('false')
 	})
 })
 
+describe('Item heights', () => {
+	it('gives every desktop item 32 px', async () => {
+		await mountMenu()
+		await openMenu()
+
+		for (const item of itemsIn(menu()!)) {
+			expect(item.classList.contains('h-8')).toBe(true)
+		}
+	})
+})
+
 describe('Avatar initials', () => {
 	it.each([
 		['marta', '', 'MA', 'marta'],

web/visual/states.ts

@@ -779,11 +779,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 				'GET /v1/article/': { status: 200, body: sixArticlesFixture },
 			},
 			steps: openAccountMenu,
-			exception: {
-				maxPercent: 26,
-				reason: 'Mobile sheet is ~153px taller than the board because the System/Light/Dark items are kept by user decision, and the board draws Profile highlighted on /home while the feature highlights it only on /profile',
-				approvedBy: 'Florian Sylvain, 2026-09-29',
-			},
 		},
 		Loading: {
 			path: '/profile',