From 2ebb9834cda8e3c2e71891836ffa4d0ccf191737 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Fri, 31 Mar 2023 09:10:47 +0530
Subject: [PATCH] modal: Fix flex-direction property for modal__content.

The flex-direction property for modal__content should
be set to column as we want to display the elements.

This does not affect most of the modals since they
do not have multiple direct child elements that are
visible at same time and the data-simplebar attribute
already sets the "flex-direction: column" property to
the elements where it is used.

But in the email address visibility modal on user
registration page, there are multiple direct child
elements for the "modal__content" element and we need
to set "flex-direction: column" property for them to
work correctly. We also change the width of select
element in the modal to "fit-content" to avoid it
taking the whole width even when not required.

This commit also fixes the bug in login_to_access
modal, since the `modal__content` for it also
has two direct child elements.
---
 web/styles/modal.css                  | 1 +
 web/styles/portico/portico_signin.css | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/styles/modal.css b/web/styles/modal.css
index 8cc7676361..5bcb35e820 100644
--- a/web/styles/modal.css
+++ b/web/styles/modal.css
@@ -81,6 +81,7 @@
 
 .modal__content {
     display: flex;
+    flex-direction: column;
     font-size: 1rem;
     overflow-y: auto;
     padding: 0 24px;
diff --git a/web/styles/portico/portico_signin.css b/web/styles/portico/portico_signin.css
index 291988e491..cecb057a3d 100644
--- a/web/styles/portico/portico_signin.css
+++ b/web/styles/portico/portico_signin.css
@@ -666,7 +666,7 @@ html {
 
     & select {
         margin-bottom: 10px;
-        width: auto;
+        width: fit-content;
         font-size: 16px;
         font-family: inherit;
     }