paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

alerts: Wrap the alert-box to prevent safari container regression.

Browse Source 
This commit wraps the alert-box into a wrapper, and moves the
position related CSS to the wrapper, to avoid safari container
regression — which results when position: fixed is applied on the
element which is also the container.
This commit is contained in:
Sayam Samal
2025-04-29 03:32:25 +05:30
committed by Tim Abbott
parent dac9e476f8
commit 9008e35acb
2 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/zerver/app/index.html
View File

@@ -167,8 +167,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1943053 -->
<source class="notification-sound-source-mp3" type="audio/mpeg" /> <source class="notification-sound-source-mp3" type="audio/mpeg" />
</audio> </audio>
<div class="alert-box app-alert-box"> <div id="alert-popup-container">
<div id="popup_banners_wrapper" class="banner-wrapper"> <div id="popup_banners_wrapper" class="banner-wrapper alert-box">
<div class="alert alert_sidebar alert-error home-error-bar" id="zephyr-mirror-error"> <div class="alert alert_sidebar alert-error home-error-bar" id="zephyr-mirror-error">
<div class="exit"></div> <div class="exit"></div>
{# The below isn't tagged for translation {# The below isn't tagged for translation

32
web/styles/alerts.css
View File

@@ -38,31 +38,15 @@
/* alert box component changes */ /* alert box component changes */
/* We preserve the flexbox styles here for the .alert-box #alert-popup-container {
in the portico; otherwise, we move them into the inner
.banner-wrapper to preserve the correct stacking of
alerts and banner display. */
.alert-box:not(.app-alert-box),
.app-alert-box .banner-wrapper {
display: flex;
/* Using column-reverse flex direction enables a stack-like
behavior where the most recent alert is always on top. */
flex-direction: column-reverse;
align-items: center;
justify-content: center;
gap: 5px;
}
.alert-box {
/* We define this variable in web/styles/app_variables.css, /* We define this variable in web/styles/app_variables.css,
but we need to redefine it here since this is shared but we need to redefine it here since this is shared
with portico. with portico.
TODO: Remove this once we remove the alert box component, TODO: Remove this once we remove the alert box component,
after the migration to the new banners is complete. */ after the migration to the new banners is complete. */
--popup-banner-translate-y-distance: 100px; --popup-banner-translate-y-distance: 100px;
/* Ensure alert box remains in viewport, /* Ensure alert box remains in viewport, regardless of scroll
regardless of scroll position in message position in message list. */
list. */
position: fixed; position: fixed;
/* Offset to account for the top padding + 5px from the top. */ /* Offset to account for the top padding + 5px from the top. */
top: calc(5px + (-1 * var(--popup-banner-translate-y-distance))); top: calc(5px + (-1 * var(--popup-banner-translate-y-distance)));
@@ -77,6 +61,16 @@
padding-top: var(--popup-banner-translate-y-distance); padding-top: var(--popup-banner-translate-y-distance);
/* Allow click events to passthrough in any area without the alerts. */ /* Allow click events to passthrough in any area without the alerts. */
pointer-events: none; pointer-events: none;
}
.alert-box {
display: flex;
/* Using column-reverse flex direction enables a stack-like
behavior where the most recent alert is always on top. */
flex-direction: column-reverse;
align-items: center;
justify-content: center;
gap: 5px;
.stacktrace { .stacktrace {
@extend .alert-display, .alert-animations; @extend .alert-display, .alert-animations;