Merge pull request #31058 from etiennesegonzac/bug-1185160

Bug 1185160 - Display the appWindow screenshot on top of the iframe r=sfoster

apps/system/style/cards_view/cards_view.css

@@ -75,7 +75,7 @@
   position: absolute;
   margin: 0;
   padding: 0;
-  height: calc(100% - 1.5rem);
+  height: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-align: center;
@@ -87,10 +87,10 @@
 #cards-view .card {
   display: block;
   position: absolute;
-  top: 25vh;
+  top: 25%;
   left: 25vw;
   width: 50vw;
-  height: 50vh;
+  height: 50%;
   transform: translateY(0);
   /* Defines the center of each card (column) as the
      coordinate that should be used for snapping */

apps/system/style/window.css

@@ -315,6 +315,10 @@
 /****************** Screenshot Overlay ******************/
 .appWindow .screenshot-overlay {
   pointer-events: none;
+
+  position: absolute;
+  top: 0;
+  width: 100%;
   height: 100%;
   visibility: hidden;
 
@@ -441,6 +445,10 @@
   z-index: 1024;
 }
 
+.appWindow > .browser-container .screenshot-overlay {
+  z-index: 10;
+}
+
 .appWindow > .chrome {
   z-index: 5;
 }