perf(v2): use static background SVG in Firefox to stop GPU repaint

[gantoine]

Description
^{Explain the changes or enhancements you are proposing with this pull request.}

In Firefox, loading any v2 page pegged the renderer/GPU (WebRender backend saturated, continuous 80-100% peaks), worst on /administration.

Root cause: assets/auth_background.svg contains two infinite CSS animations (leftMove/rightMove, 15s ... infinite). Rendered as a full-viewport background-image under a 28px blur and re-sampled by every backdrop-filter surface, Firefox's WebRender re-rasterizes the whole viewport every frame. It is worst on pages that fall back to this art (settings, administration) because they call setBgArt(null), so both background layers show the animated SVG; other pages show static cover art. The animation never surfaced in document.getAnimations() because animations inside a background-image SVG live in a separate document.

Fix: swap to the already-existing static variant (auth_background_static.svg) in Firefox only, via the @-moz-document url-prefix() hack, the same pattern v1's Auth.vue already uses. Every other browser keeps the animation. Applied to all four v2 surfaces that use this art (app background, auth, pair, device-pair). The app background fallback is moved from an inline style into CSS so the Firefox override can take effect; cover art (raster) is unaffected.

Verified: npm run typecheck clean, npm run build succeeds and the @-moz-document blocks survive minification with the static (non-animated) SVG inlined, trunk fmt clean.

AI assistance disclosure: This change was investigated and implemented with the assistance of an AI agent (PostHog Code / Claude), including the profiling analysis, root-cause diagnosis, and the code changes, all reviewed by the author.

Checklist
^{Please check all that apply.}

• I've tested the changes locally
• I've updated relevant comments
• I've assigned reviewers for this PR
• I've added unit tests that cover the changes

Screenshots (if applicable)

N/A (visual output is unchanged in Chrome/Safari; Firefox shows the static variant of the same artwork).

---

Created with PostHog Code

[Copilot]

Pull request overview

This PR mitigates a Firefox-specific performance regression in the v2 UI by avoiding the animated SVG background in Gecko, which can trigger continuous full-viewport re-rasterization under blur/backdrop-filter surfaces (notably on pages that use the fallback auth background art).

Changes:

• Move the v2 “no cover art” fallback background-image from inline styles to CSS so it can be overridden in Firefox.
• Add Firefox-only @-moz-document url-prefix() overrides to swap auth_background.svg → auth_background_static.svg across v2 surfaces that use the auth background art.
• Adjust BackgroundArt.vue to only set inline background-image when a real cover URL is present, allowing the CSS fallback (and Firefox override) to apply when unset.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
frontend/src/v2/views/PairShell.vue	Adds Firefox-only CSS override to use the static auth background SVG.
frontend/src/v2/views/DevicePairShell.vue	Adds Firefox-only CSS override to use the static auth background SVG.
frontend/src/v2/styles/global.css	Defines the fallback background-image in CSS and swaps it to the static SVG in Firefox.
frontend/src/v2/layouts/AuthLayout.vue	Adds Firefox-only CSS override to use the static auth background SVG.
frontend/src/v2/components/AppShell/BackgroundArt.vue	Removes inline fallback background-image so the CSS fallback/Firefox override can take effect.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[greptile-apps]

Greptile Summary

This PR switches Firefox v2 background fallback art to a static SVG.

• Moves the AppShell fallback image from inline styles into CSS.
• Adds a Firefox-only static fallback for the shared v2 background layer.
• Adds matching Firefox-only static backgrounds for auth, pair, and device-pair shells.

Confidence Score: 5/5

This looks safe to merge.

• No blocking issues found in the changed code.
• Fallback art still renders through CSS when no cover URL is set.
• Cover art keeps using inline styles, so the Firefox fallback override does not replace real covers.

Important Files Changed

Filename	Overview
frontend/src/v2/components/AppShell/BackgroundArt.vue	Removes inline fallback background styles so CSS can provide and override the fallback art.
frontend/src/v2/styles/global.css	Adds the shared fallback background image and the Firefox-only static SVG override.
frontend/src/v2/layouts/AuthLayout.vue	Adds a Firefox-only static background override for the auth layout.
frontend/src/v2/views/DevicePairShell.vue	Adds a Firefox-only static background override for the device-pair shell.
frontend/src/v2/views/PairShell.vue	Adds a Firefox-only static background override for the pair shell.

_{Reviews (1): Last reviewed commit: "perf(v2): use static background SVG in F..." | Re-trigger Greptile}