Skip to content

Commit 0852135

Browse files
authored
Fix for page alert pointer-events issue (#2217)
1 parent 48dccda commit 0852135

File tree

2 files changed

+17
-0
lines changed

2 files changed

+17
-0
lines changed

.changeset/shaggy-lemons-sleep.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cloudfour/patterns': patch
3+
---
4+
5+
Fixes issue where a page's alert container with no visible content could block pointer events toward the bottom of the viewport.

src/objects/page/page.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@
3535
* 1. Use a $factor of 0.5 to allow the alert to bleed more into the
3636
* content margins instead of aligning with the content itself.
3737
* 2. Match the padding-inline for visual balance.
38+
* 3. Prevent this container from blocking interactions with content beneath
39+
* its `z-index` layer in case the content within his hidden but not this
40+
* containing element.
3841
*/
3942

4043
.o-page__alert {
@@ -46,10 +49,19 @@
4649
inline-size: 100%;
4750
inset-block-end: 0;
4851
justify-content: center;
52+
pointer-events: none; // 3
4953
position: fixed;
5054
z-index: z-index.$alert;
5155
}
5256

57+
/**
58+
* Restores pointer events for any page alert content.
59+
*/
60+
61+
.o-page__alert > * {
62+
pointer-events: initial;
63+
}
64+
5365
.o-page__content {
5466
grid-row: 3;
5567
}

0 commit comments

Comments
 (0)