Bug 1578257 - Positioning fixes for the Special Monitor Snippet r=andreio

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

--HG--
extra : moz-landing-system : lando

browser/components/newtab/content-src/asrouter/templates/SimpleBelowSearchSnippet/_SimpleBelowSearchSnippet.scss

@@ -3,7 +3,6 @@
   margin: 0 auto 16px;
 
   &.withButton {
-    padding: 0 25px;
     margin: auto;
     min-height: 60px;
     background-color: transparent;
@@ -59,17 +58,13 @@
       flex-direction: row;
       padding: 0;
       text-align: inherit;
+      width: 696px;
     }
 
     @media (min-width: $break-point-medium) {
       @include full-width-styles;
     }
 
-    // There is an off-by-one gap between breakpoints; this is to prevent weirdness at exactly 1121px.
-    @media (max-width: $break-point-widest + 1px) {
-      margin: 0 60px;
-    }
-
     @media (max-width: 865px) {
       margin-inline-start: 0;
     }
@@ -133,9 +128,16 @@
     min-height: 60px;
     background-color: transparent;
 
+    .innerWrapper {
+      // There is an off-by-one gap between breakpoints; this is to prevent weirdness at exactly 1121px.
+      @media (max-width: $break-point-widest + 1px) {
+        margin: 0 40px;
+      }
+    }
+
     .blockButton {
       display: block;
-      inset-inline-end: -15%;
+      inset-inline-end: -10%;
       opacity: 0;
       margin: auto;
       top: unset;

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

@@ -3499,7 +3499,6 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
 .below-search-snippet {
   margin: 0 auto 16px; }
   .below-search-snippet.withButton {
-    padding: 0 25px;
     margin: auto;
     min-height: 60px;
     background-color: transparent; }
@@ -3542,10 +3541,8 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
         box-shadow: none;
         flex-direction: row;
         padding: 0;
-        text-align: inherit; } }
-    @media (max-width: 1123px) {
-      .SimpleBelowSearchSnippet .innerWrapper {
-        margin: 0 60px; } }
+        text-align: inherit;
+        width: 696px; } }
     @media (max-width: 865px) {
       .SimpleBelowSearchSnippet .innerWrapper {
         margin-inline-start: 0; } }
@@ -3586,9 +3583,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     margin-bottom: 10px;
     min-height: 60px;
     background-color: transparent; }
+    @media (max-width: 1123px) {
+      .SimpleBelowSearchSnippet.withButton .innerWrapper {
+        margin: 0 40px; } }
     .SimpleBelowSearchSnippet.withButton .blockButton {
       display: block;
-      inset-inline-end: -15%;
+      inset-inline-end: -10%;
       opacity: 0;
       margin: auto;
       top: unset; }

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

@@ -3502,7 +3502,6 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
 .below-search-snippet {
   margin: 0 auto 16px; }
   .below-search-snippet.withButton {
-    padding: 0 25px;
     margin: auto;
     min-height: 60px;
     background-color: transparent; }
@@ -3545,10 +3544,8 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
         box-shadow: none;
         flex-direction: row;
         padding: 0;
-        text-align: inherit; } }
-    @media (max-width: 1123px) {
-      .SimpleBelowSearchSnippet .innerWrapper {
-        margin: 0 60px; } }
+        text-align: inherit;
+        width: 696px; } }
     @media (max-width: 865px) {
       .SimpleBelowSearchSnippet .innerWrapper {
         margin-inline-start: 0; } }
@@ -3589,9 +3586,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     margin-bottom: 10px;
     min-height: 60px;
     background-color: transparent; }
+    @media (max-width: 1123px) {
+      .SimpleBelowSearchSnippet.withButton .innerWrapper {
+        margin: 0 40px; } }
     .SimpleBelowSearchSnippet.withButton .blockButton {
       display: block;
-      inset-inline-end: -15%;
+      inset-inline-end: -10%;
       opacity: 0;
       margin: auto;
       top: unset; }

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

@@ -3499,7 +3499,6 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
 .below-search-snippet {
   margin: 0 auto 16px; }
   .below-search-snippet.withButton {
-    padding: 0 25px;
     margin: auto;
     min-height: 60px;
     background-color: transparent; }
@@ -3542,10 +3541,8 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
         box-shadow: none;
         flex-direction: row;
         padding: 0;
-        text-align: inherit; } }
-    @media (max-width: 1123px) {
-      .SimpleBelowSearchSnippet .innerWrapper {
-        margin: 0 60px; } }
+        text-align: inherit;
+        width: 696px; } }
     @media (max-width: 865px) {
       .SimpleBelowSearchSnippet .innerWrapper {
         margin-inline-start: 0; } }
@@ -3586,9 +3583,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     margin-bottom: 10px;
     min-height: 60px;
     background-color: transparent; }
+    @media (max-width: 1123px) {
+      .SimpleBelowSearchSnippet.withButton .innerWrapper {
+        margin: 0 40px; } }
     .SimpleBelowSearchSnippet.withButton .blockButton {
       display: block;
-      inset-inline-end: -15%;
+      inset-inline-end: -10%;
       opacity: 0;
       margin: auto;
       top: unset; }