From a81bb51a821a80b9a3c468dbe78234d088d24ce0 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 19 Dec 2024 09:23:23 -0600
Subject: [PATCH] modals: Structure heading as grid to allow line wrapping.

---
 web/styles/modal.css    | 13 ++++++++-----
 web/styles/popovers.css |  4 ++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/styles/modal.css b/web/styles/modal.css
index aef2294869..f773c41160 100644
--- a/web/styles/modal.css
+++ b/web/styles/modal.css
@@ -30,10 +30,14 @@
 }
 
 .modal__header {
-    padding: 16px 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    padding: 16px 16px 16px 24px;
+    display: grid;
+    /* 25px at 16px/1em = 1.6667
+       29px at 16px/1em = 1.8125 */
+    grid-template:
+        "heading close-button" 1.6667em "heading ." auto / minmax(0, 1fr)
+        1.8125em;
+    grid-column-gap: 4px;
 }
 
 .modal__footer {
@@ -100,7 +104,6 @@
     &::before {
         content: "\2715";
     }
-    margin-right: -4px;
     background: transparent;
     border: 0;
 
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 016f019caa..8bfcb16189 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -918,8 +918,8 @@ ul.popover-group-menu-member-list {
     }
 
     .modal__title {
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        /* Grid defined in modal.css */
+        grid-area: heading;
 
         .stream-privacy-type-icon {
             padding-left: 3px;