corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Jason Prickett
2023-12-06 22:26:23 +00:00
parent 5454a95162
commit da24bddf95
3 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
browser/components/aboutwelcome/actors/AboutWelcomeChild.sys.mjs
View File

@@ -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",
},
{

7
browser/components/aboutwelcome/content/aboutwelcome.css
View File

@@ -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;

8
browser/components/newtab/content-src/styles/_shopping.scss
View File

@@ -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;