alerts: Modify alert-box container to use flex layout.

This is prep commit for the alert banner redesign, which adds flex
layout to the alert-box container and modifies the animations logic to
work with the new layout.

web/styles/alerts.css

@@ -31,18 +31,36 @@
 
 /* alert box component changes */
 .alert-box {
+    /* 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. */
     position: fixed;
-    top: 0;
+    /* Offset to account for the top padding + 5px from the top. */
+    top: calc(5px + (-1 * var(--popup-banner-translate-y-distance)));
     left: 0;
-    width: 900px;
-    margin-left: calc(50% - 450px);
+    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;
+    width: 100%;
     z-index: 220;
     max-height: 100%;
     overflow-y: auto;
     overscroll-behavior: contain;
+    /* 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;
 
     .stacktrace {
         @extend .alert-display, .alert-animations;
@@ -50,7 +68,6 @@
         font-size: 1rem;
         color: hsl(0deg 80% 40%);
 
-        margin-top: 5px;
         padding: 1rem 0;
 
         background-color: hsl(0deg 100% 98%);
@@ -150,8 +167,12 @@
     .alert {
         @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;
 
@@ -216,7 +237,9 @@
 @keyframes fadeIn {
     0% {
         opacity: 0;
-        transform: translateY(-100px);
+        transform: translateY(
+            calc(-1 * var(--popup-banner-translate-y-distance))
+        );
     }
 
     100% {
@@ -233,16 +256,16 @@
 
     100% {
         opacity: 0;
-        transform: translateY(-100px);
+        transform: translateY(
+            calc(-1 * var(--popup-banner-translate-y-distance))
+        );
     }
 }
 
 /* @media queries */
 @media (width < $lg_min) {
-    .alert-box {
-        width: 80%;
-        left: 10%;
-        margin-left: 0;
+    .alert-box .alert {
+        max-width: 90%;
     }
 }
 

web/styles/app_variables.css

@@ -647,6 +647,9 @@
         ". . banner-label banner-label banner-close-button banner-close-button"
         ". banner-action-buttons banner-action-buttons banner-action-buttons banner-action-buttons .";
 
+    /* Popup banner related variables */
+    --popup-banner-translate-y-distance: 100px;
+
     /* Colors used across the app */
     --color-date: light-dark(hsl(0deg 0% 15% / 75%), hsl(0deg 0% 100% / 75%));
     --color-background-private-message-header: light-dark(

web/styles/zulip.css

@@ -1016,12 +1016,7 @@ div.focused-message-list.is-conversation-view .recipient_row {
 }
 
 .home-error-bar {
-    margin-top: 5px;
     display: none;
-
-    .alert {
-        margin-bottom: auto;
-    }
 }
 
 .streamname {