Vue hydration silently drops class attribute updates when SSR and client
render different branches of a v-if chain — per the project's Auth SSR
Pattern, useAuth is client-only and server always renders unauthenticated,
so PageHeader (v-else branch) was rendering inside a leftover .loading /
.loading-state div from the v-else-if branch. On mobile that div was
being masked by the visual-test commonMasks (.loading-state), producing
a large fuchsia block in the snapshot.
Wrapping the v-if/v-else-if/v-else chain in <ClientOnly> ensures the
server renders nothing for the auth-gated content and the client performs
a clean first render, matching the pattern already used in dashboard.vue.
Also update admin-dashboard-desktop for minor anti-aliasing drift.
Adds 13 new visual regression baselines:
- Public: about (desktop + mobile), members (desktop + mobile)
- Authenticated desktop: member-account, member-activity, connections,
admin-dashboard, members-detail
- Authenticated mobile: member-dashboard, member-profile,
member-account, connections
Switches to a single serial test.describe with a beforeAll that logs in
once and saves the auth cookie via storageState. This avoids repeated
/api/dev/test-login calls that exhausted the dev server's MongoDB
connections under parallel execution.
Masks added: .tl-time, .stat-val, .item-date, .mc-avatar, .cc-avatar,
.profile-avatar, .filter-count — covering activity timestamps, stat
values, member join dates, avatars, and member counts.
