From 229fd4114ac7c062bff3be9703eb8c4f793754ce Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Wed, 30 Apr 2025 15:59:46 +0530
Subject: [PATCH] popup_banners: Align popup banners to center using transform.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit aligns the popup banners horizontally by using transform,
and removes the need for `pointer-events: none` — which made the
scrolling buggy due to gaps in between the banners.
---
 web/styles/alerts.css  | 20 +++++++-------------
 web/styles/banners.css |  8 --------
 2 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/web/styles/alerts.css b/web/styles/alerts.css
index c593062adf..6a8aedf510 100644
--- a/web/styles/alerts.css
+++ b/web/styles/alerts.css
@@ -44,8 +44,10 @@
     position: fixed;
     /* Offset to account for the top padding + 5px from the top. */
     top: calc(5px + (-1 * var(--popup-banner-translate-y-distance)));
-    left: 0;
+    left: 50%;
+    transform: translateX(-50%);
     width: 100%;
+    max-width: 900px;
     z-index: 220;
     max-height: 100%;
     overflow-y: auto;
@@ -53,8 +55,10 @@
     /* Set top padding to account for the translate-y motion of the
        animation to prevent the vertical scroll bar from appearing. */
     padding-top: var(--popup-banner-translate-y-distance);
-    /* Allow click events to passthrough in any area without the alerts. */
-    pointer-events: none;
+
+    @media (width < $lg_min) {
+        max-width: 90%;
+    }
 }
 
 .alert-box {
@@ -62,7 +66,6 @@
     /* 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;
 
@@ -70,11 +73,9 @@
         @extend .alert-animations;
 
         box-sizing: border-box;
-        max-width: 900px;
         width: 100%;
         border-radius: 4px;
         background-color: hsl(0deg 0% 100%);
-        pointer-events: auto;
 
         position: relative;
 
@@ -164,13 +165,6 @@
     }
 }
 
-/* @media queries */
-@media (width < $lg_min) {
-    .alert-box .alert {
-        max-width: 90%;
-    }
-}
-
 #request-progress-status-banner {
     display: none;
     align-items: center;
diff --git a/web/styles/banners.css b/web/styles/banners.css
index 666090ba51..e91a4eba00 100644
--- a/web/styles/banners.css
+++ b/web/styles/banners.css
@@ -193,13 +193,5 @@
 .popup-banner {
     @extend .popup-banner-animations;
 
-    pointer-events: auto;
-    max-width: 900px;
     width: 100%;
-
-    /* Here the container width == viewport width,
-       so we can work with the media breakpoints. */
-    @container banner (width < $lg_min) {
-        max-width: 90%;
-    }
 }