fix: Fix z-index rendering issue when card is expanded (#2274)

- Closes #2155

src/scss/card.scss

@@ -36,8 +36,12 @@
 // from other cards. Tip: Best way to test this is with multiple Advanced Camera
 // Cards, opening a submenu on the 1st (e.g. media players) and verifying the
 // menu of the 2nd card is not visible through the opened submenu on the 1st.
-:host(:not(:hover)) {
-  z-index: #{$z-index-card-flatten};
+:host(:not(:hover):not([expanded])) {
+  z-index: auto;
+
+  // Create a new stacking context to prevent z-index issues with children
+  // "breaking out" of the card.
+  isolation: isolate;
 }
 
 advanced-camera-card-loading {

src/scss/z-index.scss

@@ -18,6 +18,3 @@ $z-index-submenu: 5;
 $z-index-menu: 4;
 $z-index-drawer: 3;
 $z-index-status-bar: 2;
-
-// The base z-index when the card is not hovered over. See note in card.scss .
-$z-index-card-flatten: 0;