Bug 1878747 - Move shortcut context menu outside hover background r=desktop-theme-reviewers,thecount,amy

Differential Revision: https://phabricator.services.mozilla.com/D200740

Author: nathan-barrett

browser/components/newtab/content-src/components/TopSites/_TopSites.scss

@@ -106,6 +106,7 @@ $letter-fallback-color: $white;
   width: 120px;
   border-radius: 8px;
   display: inline-block;
+  margin-block-end: 16px;
 
   // container for context menu
   .top-site-inner {
@@ -134,7 +135,7 @@ $letter-fallback-color: $white;
     -moz-context-properties: fill;
     height: 20px;
     width: 20px;
-    inset-inline-end: -9px;
+    inset-inline-end: 3px;
     opacity: 0;
     position: absolute;
     top: -20px;

browser/components/newtab/css/activity-stream-linux.css

@@ -603,6 +603,7 @@ main section {
   width: 120px;
   border-radius: 8px;
   display: inline-block;
+  margin-block-end: 16px;
 }
 .top-site-outer .top-site-inner {
   position: relative;
@@ -625,7 +626,7 @@ main section {
   -moz-context-properties: fill;
   height: 20px;
   width: 20px;
-  inset-inline-end: -9px;
+  inset-inline-end: 3px;
   opacity: 0;
   position: absolute;
   top: -20px;

browser/components/newtab/css/activity-stream-mac.css

@@ -607,6 +607,7 @@ main section {
   width: 120px;
   border-radius: 8px;
   display: inline-block;
+  margin-block-end: 16px;
 }
 .top-site-outer .top-site-inner {
   position: relative;
@@ -629,7 +630,7 @@ main section {
   -moz-context-properties: fill;
   height: 20px;
   width: 20px;
-  inset-inline-end: -9px;
+  inset-inline-end: 3px;
   opacity: 0;
   position: absolute;
   top: -20px;

browser/components/newtab/css/activity-stream-windows.css

@@ -603,6 +603,7 @@ main section {
   width: 120px;
   border-radius: 8px;
   display: inline-block;
+  margin-block-end: 16px;
 }
 .top-site-outer .top-site-inner {
   position: relative;
@@ -625,7 +626,7 @@ main section {
   -moz-context-properties: fill;
   height: 20px;
   width: 20px;
-  inset-inline-end: -9px;
+  inset-inline-end: 3px;
   opacity: 0;
   position: absolute;
   top: -20px;