Bug 1866501 - Add style to shopping survey and onboarding card to support variable width r=pdahiya,omc-reviewers,negin

Simple fix to address the survey container's overflow issue in the sidebar. This allows the survey to stretch to fit the outer container, which allows the rest of the container's content to flow responsively.

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

browser/components/aboutwelcome/actors/AboutWelcomeChild.sys.mjs

@@ -366,7 +366,6 @@ const OPTIN_DEFAULT = {
             url: "chrome://browser/content/shopping/assets/optInLight.avif",
             darkModeImageURL:
               "chrome://browser/content/shopping/assets/optInDark.avif",
-            height: "172px",
             marginInline: "24px",
           },
           {

browser/components/aboutwelcome/content/aboutwelcome.css

@@ -769,6 +769,12 @@ panel#feature-callout[arrow-position=inline-start-bottom] {
 .onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a {
   text-decoration: underline;
 }
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .brand-logo {
+  width: 100%;
+  max-width: 294px;
+  max-height: 290px;
+  height: auto;
+}
 .onboardingContainer.shopping .screen[pos=split] .section-main .dismiss-button {
   top: 0;
   margin: 14px 10px;
@@ -828,6 +834,7 @@ panel#feature-callout[arrow-position=inline-start-bottom] {
   overflow: visible;
   font-size: 1em;
   gap: 12px;
+  width: 100%;
 }
 .onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container .multi-select-item input {
   margin-block: 0;

browser/components/newtab/content-src/styles/_shopping.scss

@@ -89,6 +89,13 @@
           text-decoration: underline;
         }
       }
+
+      .brand-logo {
+        width: 100%;
+        max-width: 294px;
+        max-height: 290px;
+        height: auto;
+      }
     }
 
     .dismiss-button {
@@ -164,6 +171,7 @@
         overflow: visible;
         font-size: 1em;
         gap: 12px;
+        width: 100%;
 
         .multi-select-item input {
           margin-block: 0;