Skip to content

Mobile breakpoints on interstitial modal #14193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Oct 31, 2025
Merged

Mobile breakpoints on interstitial modal #14193

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
cc26824
Created animated banner for each Web supported component
mpshopify Oct 14, 2025
d5673e0
Added distinct color and icons for each banner type
mpshopify Oct 14, 2025
aa29930
Add interstitial page with animated stars and noise texture
mpshopify Oct 15, 2025
5d6294f
Merge branch 'interstitial-page' into polaris-react-deprecation
mpshopify Oct 15, 2025
dbfe69b
finalized implementaton, cleaned up code
mpshopify Oct 20, 2025
dba9e3e
Added session parameter for insterstitial modal
mpshopify Oct 20, 2025
0b8d3d2
Fixed TypeScript build error - added webComponent to FrontMatter type
mpshopify Oct 20, 2025
5e8afc0
Added webComponent to global FrontMatter type
mpshopify Oct 20, 2025
3bd74d1
Added empty changeset for polaris.shopify.com changes
mpshopify Oct 20, 2025
67a005e
Fixed SSR build error - added safe dark mode wrapper
mpshopify Oct 20, 2025
b0c9180
Fixed lint error - proper SSR-safe dark mode implementation
mpshopify Oct 20, 2025
92ca467
Improved mobile responsiveness for interstitial modal
mpshopify Oct 20, 2025
b311b09
Merge main into polaris-react-deprecation, keeping mobile fixes
mpshopify Oct 31, 2025
a605435
Fix mobile alignment of interstitial modal
mpshopify Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 57 additions & 4 deletions polaris.shopify.com/src/components/InterstitialModal/InterstitialModal.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,15 @@
z-index: 10000;
padding: 2rem;
animation: fadeIn 0.4s ease-in-out;
overflow-y: auto;

@media (max-width: 768px) {
padding: 1rem;
}

@media (max-width: 480px) {
padding: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
animation: none;
Expand Down Expand Up @@ -146,6 +155,10 @@
@media (max-width: 768px) {
padding: 1.5rem;
}

@media (max-width: 480px) {
padding: 1rem;
}
}

.StarIconContainer {
Expand All @@ -159,9 +172,17 @@
@media (max-width: 768px) {
width: 180px;
height: 240px;
margin: -1rem auto 5rem;
padding-bottom: 3rem;
padding-top: 2rem;
margin: -1rem auto 4rem;
padding-bottom: 2rem;
padding-top: 1.5rem;
}

@media (max-width: 480px) {
width: 140px;
height: 200px;
margin: 0 auto 2.5rem;
padding-bottom: 1.5rem;
padding-top: 1rem;
}
}

Expand Down Expand Up @@ -246,6 +267,11 @@
width: 180px;
height: 180px;
}

@media (max-width: 480px) {
width: 120px;
height: 120px;
}
}

// Background star bottom layer sinks down and blurs more (sunsetting)
Expand Down Expand Up @@ -307,7 +333,13 @@
line-height: 1.3;

@media (max-width: 768px) {
font-size: var(--font-size-1000);
font-size: var(--font-size-900);
margin: 0 0 1rem 0;
}

@media (max-width: 480px) {
font-size: var(--font-size-800);
margin: 0 0 0.75rem 0;
}
}

Expand All @@ -320,6 +352,13 @@

@media (max-width: 768px) {
font-size: var(--font-size-600);
margin: 0 0 2rem 0;
}

@media (max-width: 480px) {
font-size: var(--font-size-500);
margin: 0 0 1.5rem 0;
line-height: 1.5;
}
}

Expand All @@ -328,6 +367,10 @@
flex-direction: column;
gap: 1.25rem;
align-items: center;

@media (max-width: 480px) {
gap: 1rem;
}
}

.PrimaryButton {
Expand All @@ -344,6 +387,11 @@
border: none !important;
transition: all var(--duration-200) var(--ease-in-out) !important;

@media (max-width: 480px) {
padding: 0.875rem 1.5rem !important;
font-size: var(--font-size-500) !important;
}

&:hover {
background: var(--p-color-bg-fill-hover) !important;
transform: translateY(-1px);
Expand Down Expand Up @@ -383,6 +431,11 @@
opacity: 0.9;
transition: opacity var(--duration-200) var(--ease-in-out);

@media (max-width: 480px) {
font-size: var(--font-size-300);
padding: 0.375rem;
}

&:hover {
opacity: 1;
}
Expand Down
Loading