From b67eb1db60d9c0bf613cd9e0027d26095ba7f56f Mon Sep 17 00:00:00 2001
From: Maxx Crawford <mcrawford@mozilla.com>
Date: Tue, 15 Oct 2024 15:14:12 +0000
Subject: [PATCH] Bug 1920079 - Layout Expt (Var B) - Fix zoom issue on
 customize panel not overlapping content when open
 r=home-newtab-reviewers,desktop-theme-reviewers,nbarrett

Differential Revision: https://phabricator.services.mozilla.com/D224834
---
 .../content-src/components/CustomizeMenu/_CustomizeMenu.scss | 3 ++-
 .../components/DiscoveryStreamComponents/DSCard/_DSCard.scss | 2 ++
 .../newtab/content-src/components/Search/_Search.scss        | 2 +-
 browser/components/newtab/css/activity-stream.css            | 5 +++--
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
index 2df1a7fdf806..1b1d7d0ce151 100644
--- a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
+++ b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
@@ -1,6 +1,8 @@
 .personalizeButtonWrapper {
   margin: 0;
   padding: 0;
+  // z-index note: menu should cover fixed search bar and asrouter dev tools toggle button
+  z-index: 3;
 
   @media (height < 700px) {
     position: absolute;
@@ -12,7 +14,6 @@
     position: fixed;
     inset-block-start: var(--space-xlarge);
     inset-inline-end: var(--space-xlarge);
-    z-index: 1000;
   }
 }
 
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
index ab91c97d82be..19935af926f3 100644
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -10,6 +10,8 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
   display: flex;
   flex-direction: column;
   position: relative;
+  // Bug 1914571: Reset the z-index threshold for topic labels
+  z-index: 0;
 
   &.placeholder {
     display: flex;
diff --git a/browser/components/newtab/content-src/components/Search/_Search.scss b/browser/components/newtab/content-src/components/Search/_Search.scss
index 0377a4973528..0020a9c5e312 100644
--- a/browser/components/newtab/content-src/components/Search/_Search.scss
+++ b/browser/components/newtab/content-src/components/Search/_Search.scss
@@ -326,7 +326,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
       position: fixed;
       top: 0;
       width: 100%;
-      z-index: 9;
+      z-index: 1;
 
       .search-inner-wrapper {
         min-height: $search-height;
diff --git a/browser/components/newtab/css/activity-stream.css b/browser/components/newtab/css/activity-stream.css
index f92ea3071059..907bfb64b9b6 100644
--- a/browser/components/newtab/css/activity-stream.css
+++ b/browser/components/newtab/css/activity-stream.css
@@ -1723,7 +1723,7 @@ main section {
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 9;
+    z-index: 1;
   }
   body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
     min-height: 45px;
@@ -1926,6 +1926,7 @@ main section {
 .personalizeButtonWrapper {
   margin: 0;
   padding: 0;
+  z-index: 3;
 }
 @media (height < 700px) {
   .personalizeButtonWrapper {
@@ -1939,7 +1940,6 @@ main section {
     position: fixed;
     inset-block-start: var(--space-xlarge);
     inset-inline-end: var(--space-xlarge);
-    z-index: 1000;
   }
 }
 
@@ -4799,6 +4799,7 @@ main section {
   display: flex;
   flex-direction: column;
   position: relative;
+  z-index: 0;
 }
 .ds-card.placeholder {
   display: flex;