fix(match-rom): show the saving overlay above the grid match panel

[sdornan]

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

Confirming a match in the Match ROM dialog appeared to give no feedback at all. The saving overlay was rendering the whole time, but it was never visible on the default grid layout.

.match-grid__overlay (the focus panel that holds the confirm button) sits at z-index: 5. .match-grid is position: relative with z-index: auto, so it establishes no stacking context and that layer competes directly with the dialog's own absolutely-positioned children. .r-v2-match__saving sits at z-index: 1 and loses, so its spinner and "Updating" label were painted behind .match-grid__panel, which is opaque and centred exactly where they render.

The fix is one property: isolation: isolate on .match-grid. That contains the variant's internal layers, so .match-grid participates in the dialog's stacking context at z-index: auto and the saving overlay reliably paints above the whole subtree.

Preferred over bumping the saving overlay to z-index: 6, which would hardcode a value coupled to the grid variant's internals and break silently if those ever change.

The list variant is unaffected. It has no competing absolutely-positioned layer, which is why the bug only showed on the default grid.

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

Verification

Green locally: npm run typecheck, npm run test (667 tests / 56 files), npm run build, ESLint and Prettier on the touched file.

Behaviour was verified by mounting the real MatchRomDialog and grid variant in a browser with their compiled CSS, stubbing only the network layer (searchRom returns fixtures, updateRom never settles so the dialog holds its matching state). Driving the real flow (search, open a match, pick a cover, confirm) and hit-testing the centre of the dialog body with document.elementFromPoint:

state	topmost element at centre
with isolation: isolate	inside .r-v2-match__saving
with isolation forced back to auto	inside .match-grid__panel
isolation: isolate restored	inside .r-v2-match__saving

Confirmed visually as well: the match panel blurs and dims behind the overlay with the spinner and "Updating" label crisp on top.

Scope of that testing, stated plainly: the components and CSS are real, but the data is stubbed, so this is not a full end-to-end run against a live backend and metadata providers. Only dark theme was exercised; isolation has no interaction with colour tokens, so the fix is theme-independent by construction.

AI assistance

This change was written with AI assistance (Claude Code). The root-cause diagnosis, the choice of isolation: isolate over a z-index bump, the verification harness, and this description were all AI-produced and reviewed by me before submitting.

[greptile-apps]

Greptile Summary

Adds a stacking context to the Match ROM grid so the saving overlay renders above the grid’s internal focus panel.

• Applies isolation: isolate to .match-grid.
• Documents the stacking-order relationship between the grid focus overlay and dialog saving overlay.

Confidence Score: 5/5

The PR appears safe to merge, with the focused CSS change correcting the saving overlay’s stacking order without disrupting other identified UI layers.

The grid’s positioned layers are internal to the component, while the saving overlay is its only positioned dialog-level sibling and now correctly paints above the isolated grid subtree.

Important Files Changed

Filename	Overview
frontend/src/v2/components/MatchRom/MatchRomBodyGrid.vue	The new isolated stacking context contains the grid’s internal z-index layers and allows the sibling saving overlay to render above them without changing their internal ordering.

_{Reviews (1): Last reviewed commit: "fix(match-rom): show the saving overlay ..." | Re-trigger Greptile}

[Copilot]

Pull request overview

This PR fixes a UI feedback issue in the v2 Match ROM dialog where the "saving/updating" overlay existed but was rendered behind the grid match panel due to stacking order in the grid layout.

Changes:

• Create a new stacking context for the grid variant root by adding isolation: isolate to .match-grid.
• Add an inline CSS comment documenting the stacking-context rationale and the relevant internal z-index relationships.

---

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