fix(profile,account): wrap auth-conditional UI in ClientOnly

Browse source

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.

...

This commit is contained in:

Jennie Robinson Faber 2026-04-08 17:41:01 +01:00

parent 8365feb970

commit 4a5b129eeb

7 changed files with 4 additions and 0 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download patch file Download diff file Expand all files Collapse all files

BIN

e2e/__screenshots__/visual/pages.spec.js-snapshots/admin-dashboard-desktop-chromium-darwin.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 247 KiB After Width:  |  Height:  |  Size: 247 KiB