tor-browser

commit add9e757b215a6e5fdded206cd4eb5b6fda314ef
parent e02a390fa4b4abd0040e608ed06214c7b04d7eff
Author: Irene Ni <ini@mozilla.com>
Date:   Fri,  3 Oct 2025 14:45:19 +0000

Bug 1992266 - Adjust spacing on New Tab inferred personalization messaging card. r=home-newtab-reviewers,nbarrett

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

Diffstat:
M
browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/_PersonalizedCard.scss
 | 
14
+++++++++-----
M
browser/extensions/newtab/css/activity-stream.css
 | 
13
++++++++-----

2 files changed, 17 insertions(+), 10 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/_PersonalizedCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/_PersonalizedCard.scss
@@ -2,7 +2,7 @@
   background-color: var(--background-color-canvas);
   border: 2px solid var(--border-color-card);
   color: var(--text-color);
-  padding: var(--space-xlarge);
+  padding: var(--space-xxlarge);
   border-radius: var(--border-radius-large);
   margin: var(--space-xlarge) 0;
   position: relative;
@@ -49,7 +49,7 @@
     // 1-column layout
     @media (max-width: $break-point-layout-variant) {
       grid-template-columns: 1fr;
-      gap: var(--space-small);
+      gap: var(--space-large);
 
       img {
         justify-self: initial;
@@ -76,12 +76,16 @@
         grid-row: 2;
         grid-column: 2 / span 2;
       }
+
+      p {
+        width: 230px;
+      }
     }
 
     // 3 and 4-column layout
     @media (min-width: $break-point-widest) {
-      grid-template-columns: 0.2fr 1fr 1fr 1fr;
-      gap: var(--space-small);
+      grid-template-columns: 0.2fr 1.2fr 0.8fr 1fr;
+      gap: var(--space-large);
 
       img {
         width: 75px;
@@ -117,7 +121,7 @@
 
     // rules for 3-col
     @media (min-width: $break-point-widest) and (max-width: $break-point-sections-variant) {
-      gap: var(--space-small);
+      grid-template-columns: 0.2fr 1fr 1fr 1fr;
 
       h2 {
         max-width: 200px;
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -9438,7 +9438,7 @@ dialog::after {
   background-color: var(--background-color-canvas);
   border: 2px solid var(--border-color-card);
   color: var(--text-color);
-  padding: var(--space-xlarge);
+  padding: var(--space-xxlarge);
   border-radius: var(--border-radius-large);
   margin: var(--space-xlarge) 0;
   position: relative;
@@ -9479,7 +9479,7 @@ dialog::after {
 @media (max-width: 724px) {
   .personalized-card-wrapper .personalized-card-inner {
     grid-template-columns: 1fr;
-    gap: var(--space-small);
+    gap: var(--space-large);
   }
   .personalized-card-wrapper .personalized-card-inner img {
     justify-self: initial;
@@ -9503,11 +9503,14 @@ dialog::after {
     grid-row: 2;
     grid-column: 2/span 2;
   }
+  .personalized-card-wrapper .personalized-card-inner p {
+    width: 230px;
+  }
 }
 @media (min-width: 1122px) {
   .personalized-card-wrapper .personalized-card-inner {
-    grid-template-columns: 0.2fr 1fr 1fr 1fr;
-    gap: var(--space-small);
+    grid-template-columns: 0.2fr 1.2fr 0.8fr 1fr;
+    gap: var(--space-large);
   }
   .personalized-card-wrapper .personalized-card-inner img {
     width: 75px;
@@ -9538,7 +9541,7 @@ dialog::after {
 }
 @media (min-width: 1122px) and (max-width: 1390px) {
   .personalized-card-wrapper .personalized-card-inner {
-    gap: var(--space-small);
+    grid-template-columns: 0.2fr 1fr 1fr 1fr;
   }
   .personalized-card-wrapper .personalized-card-inner h2 {
     max-width: 200px;