From 9008e35acb4922ab8b184c40205f0d22778aebd1 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Tue, 29 Apr 2025 03:32:25 +0530
Subject: [PATCH] alerts: Wrap the alert-box to prevent safari container
 regression.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 templates/zerver/app/index.html |  4 ++--
 web/styles/alerts.css           | 32 +++++++++++++-------------------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index 6e165d3d47..25cceb3d03 100644
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@@ -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
diff --git a/web/styles/alerts.css b/web/styles/alerts.css
index d7ee6c7438..8072e95952 100644
--- a/web/styles/alerts.css
+++ b/web/styles/alerts.css
@@ -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;