[gaurrov]

Notes for Reviewers

This PR addresses meshery/meshery#22640. In the Kanvas "Start with a Template" dialog, hovering a catalog card in Firefox shows the front face mirrored on top of the back face.

Root cause

CardFront is position: absolute; z-index: 1 with backface-visibility: hidden, but it has no transform of its own. Firefox does not apply backface-visibility to that face once .innerCard rotates. Because of the z-index, it also paints the face above CardBack, so the front shows through mirrored. Chromium hides it correctly, so the bug only appears in Firefox.

Fix

When the card flips (shouldFlip), CardFront now gets transform: 'rotateY(0deg)'. This is the same pattern FrontFace already uses in this file. Cards that don't flip are unchanged.

Screenshots

The real CustomCatalogCard, rendered on its own from Sistent source and hovered (Firefox 132 / Chrome 155):

Before, Firefox: front face mirrored over the back face

ly

After, Firefox: back face renders clean

After, Chrome: unchanged (Chrome was never affected)

How it was verified

• I built a standalone copy of the card styles, removing one property per variant, and rendered it in Firefox 132 and Chrome 155. Only giving CardFront its own transform fixes the problem. Removing just the z-index still lets the z-indexed "type" chip and ribbon show through mirrored. Removing the title line-clamp, the ribbon, the border, transition: all or the outer preserve-3d had no effect.
• I rendered the real CustomCatalogCard and hovered it in Firefox and Chrome, before and after the change. The front is mirrored before the fix; after it, the back face is clean in both browsers, and the card looks the same when not flipped.
• New src/__testing__/CustomCatalogCard.test.tsx checks that the front face of a flipping card has the transform and that a non-flipping card doesn't. It fails without the fix and passes with it.
• jest (656 passed), eslint, prettier and tsup build all pass.

Kanvas will need a Sistent version bump to pick this up.

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Bug Fixes

  • Improved catalog card flipping so the front face displays more reliably during the animation.

• Tests

  • Added coverage for the catalog card’s front-face appearance in flipped and unflipped states.

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: dea6315a-4f13-4805-aca9-5aef18aa5651

Commits

Reviewing files that changed from the base of the PR and between fcaa158 and 66bf855.

Files selected for processing: 2

• src/__testing__/CustomCatalogCard.test.tsx
• src/custom/CustomCatalog/style.tsx

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

Walkthrough

CardFront now applies rotateY(0deg) when shouldFlip is true. Tests check the front face’s transform and backface visibility for enabled and disabled states.

Changes: Custom catalog card flip

Layer / File(s)	Summary
Front-face transform and tests src/custom/CustomCatalog/style.tsx, src/__testing__/CustomCatalogCard.test.tsx	CardFront sets a zero-degree Y-axis transform when shouldFlip is true. Tests check the front face’s backface visibility and transform with flipping enabled, and its empty transform with flipping disabled.

Priority: Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: fitzergerald

Merge Risk: Minimal · up to 66bf8

No actionable merge-blocking risk remains after removing the unsupported visual-regression request.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: fixing the Firefox rendering issue that leaves the flipped catalog card front face visible.
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 2 files.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}