sidebars: Show overlays full-screen, in proper stacking order.

This takes effect only at narrow viewports.

Fixes: #33713

web/src/css_variables.ts

@@ -38,6 +38,7 @@ export const container_breakpoints = {
     cq_xl_min: xl / base_em_px + "em",
     cq_lg_min: lg / base_em_px + "em",
     cq_md_min: md / base_em_px + "em",
+    cq_ml_min: ml / base_em_px + "em",
     cq_sm_min: sm / base_em_px + "em",
     cq_mm_min: mm / base_em_px + "em",
 };

web/src/sidebar_ui.ts

@@ -44,11 +44,13 @@ export let left_sidebar_expanded_as_overlay = false;
 export let right_sidebar_expanded_as_overlay = false;
 
 export function hide_userlist_sidebar(): void {
-    $(".app-main .column-right").removeClass("expanded");
+    const $userlist_sidebar = $(".app-main .column-right");
+    $userlist_sidebar.removeClass("expanded topmost-overlay");
     right_sidebar_expanded_as_overlay = false;
 }
 
 export function show_userlist_sidebar(): void {
+    const $streamlist_sidebar = $(".app-main .column-left");
     const $userlist_sidebar = $(".app-main .column-right");
     if ($userlist_sidebar.css("display") !== "none") {
         // Return early if the right sidebar is already visible.
@@ -62,14 +64,24 @@ export function show_userlist_sidebar(): void {
     }
 
     $userlist_sidebar.addClass("expanded");
+    if (left_sidebar_expanded_as_overlay) {
+        $userlist_sidebar.addClass("topmost-overlay");
+        $streamlist_sidebar.removeClass("topmost-overlay");
+    }
     fix_invite_user_button_flicker();
     resize.resize_page_components();
     right_sidebar_expanded_as_overlay = true;
 }
 
 export function show_streamlist_sidebar(): void {
+    const $userlist_sidebar = $(".app-main .column-right");
+    const $streamlist_sidebar = $(".app-main .column-left");
     // Left sidebar toggle icon is attached to middle column.
     $(".app-main .column-left, #navbar-middle").addClass("expanded");
+    if (right_sidebar_expanded_as_overlay) {
+        $streamlist_sidebar.addClass("topmost-overlay");
+        $userlist_sidebar.removeClass("topmost-overlay");
+    }
     resize.resize_stream_filters_container();
     left_sidebar_expanded_as_overlay = true;
 }
@@ -90,7 +102,9 @@ export function show_left_sidebar(): void {
 }
 
 export function hide_streamlist_sidebar(): void {
+    const $streamlist_sidebar = $(".app-main .column-left");
     $(".app-main .column-left, #navbar-middle").removeClass("expanded");
+    $streamlist_sidebar.removeClass("topmost-overlay");
     left_sidebar_expanded_as_overlay = false;
 }
 

web/styles/zulip.css

@@ -544,6 +544,19 @@ body.has-overlay-scrollbar {
     top: 0;
 }
 
+.app-main .column-right.expanded,
+.app-main .column-left.expanded {
+    /* We share a baseline z-index to make
+       sure overlays respect the .topmost-overlay
+       below. */
+    z-index: 10;
+}
+
+.app-main .column-right.expanded.topmost-overlay,
+.app-main .column-left.expanded.topmost-overlay {
+    z-index: 15;
+}
+
 #message_feed_container,
 .app-main .column-left .left-sidebar,
 .app-main .column-right .right-sidebar {
@@ -1784,6 +1797,20 @@ body:not(.hide-left-sidebar) {
     }
 }
 
+@container app (width <= $cq_ml_min) {
+    .column-right.expanded,
+    .column-left.expanded {
+        width: 100vw;
+        max-width: 100%;
+    }
+
+    .app-main .column-right.expanded .right-sidebar,
+    .app-main .column-left.expanded .left-sidebar {
+        width: 100vw;
+        max-width: 100%;
+    }
+}
+
 @container header-container (width <= $cq_sm_min) {
     .narrow_description {
         display: none;
@@ -1871,6 +1898,22 @@ body:not(.hide-left-sidebar) {
     }
 }
 
+@media (width <= $ml_min) {
+    .without-container-query-support {
+        .column-right.expanded,
+        .column-left.expanded {
+            width: 100vw;
+            max-width: 100%;
+        }
+
+        .app-main .column-right.expanded .right-sidebar,
+        .app-main .column-left.expanded .left-sidebar {
+            width: 100vw;
+            max-width: 100%;
+        }
+    }
+}
+
 @media (width <= $sm_min) {
     .without-container-query-support {
         .narrow_description {