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" />
</audio>
<div class="alert-box app-alert-box">
<div id="popup_banners_wrapper" class="banner-wrapper">
<div id="alert-popup-container">
<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="exit"></div>
{# The below isn't tagged for translation

32
web/styles/alerts.css
View File

@@ -38,31 +38,15 @@
/* alert box component changes */
/* We preserve the flexbox styles here for the .alert-box
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 {
#alert-popup-container {
/* We define this variable in web/styles/app_variables.css,
but we need to redefine it here since this is shared
with portico.
TODO: Remove this once we remove the alert box component,
after the migration to the new banners is complete. */
--popup-banner-translate-y-distance: 100px;
/* Ensure alert box remains in viewport,
regardless of scroll position in message
list. */
/* Ensure alert box remains in viewport, regardless of scroll
position in message list. */
position: fixed;
/* Offset to account for the top padding + 5px from the top. */
top: calc(5px + (-1 * var(--popup-banner-translate-y-distance)));
@@ -77,6 +61,16 @@
padding-top: var(--popup-banner-translate-y-distance);
/* Allow click events to passthrough in any area without the alerts. */
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 {
@extend .alert-display, .alert-animations;