From fcc1548a741569c915949684c82029d7da61250c Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Fri, 29 Oct 2021 11:56:59 +0530
Subject: [PATCH] settings: Fix css for custom profile fields in edit user
 form.

Previously the edit user modal element was appended inside the
settings overlay itself, so the styles for .custom_user_field
elements nested inside #settings_page were sufficient both for
edit user UI and profile section in personal settings.

e6e60107 changed the code to append edit user modal to body
element and thus existing css was no longer applied to custom
profile fields with custom_user_field class in edit user modal.

This commit fixes to have same styles for .custom_user_field
elements in #edit_user_form.
---
 static/styles/settings.css | 79 ++++++++++++++++++++------------------
 1 file changed, 41 insertions(+), 38 deletions(-)

diff --git a/static/styles/settings.css b/static/styles/settings.css
index fdf482a227..11c0e6b9b3 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -1478,40 +1478,6 @@ input[type="checkbox"] {
         }
     }
 
-    .custom_user_field {
-        padding-bottom: 20px;
-
-        textarea {
-            width: 320px;
-            height: 80px;
-        }
-
-        &:hover .remove_date {
-            display: inline-flex;
-        }
-
-        .remove_date {
-            opacity: 0.5;
-            display: none;
-            cursor: pointer;
-            position: relative;
-            top: 2px;
-            left: -20px;
-
-            &:hover {
-                opacity: 1;
-            }
-        }
-
-        .datepicker {
-            cursor: default;
-        }
-
-        .person_picker {
-            min-width: 206px;
-        }
-    }
-
     .content-wrapper {
         position: absolute;
         left: 251px;
@@ -1562,8 +1528,42 @@ input[type="checkbox"] {
         cursor: default;
     }
 
-    .custom_user_field .field_hint {
-        color: hsl(0, 0%, 67%);
+    .custom_user_field {
+        padding-bottom: 20px;
+
+        .field_hint {
+            color: hsl(0, 0%, 67%);
+        }
+
+        textarea {
+            width: 320px;
+            height: 80px;
+        }
+
+        &:hover .remove_date {
+            display: inline-flex;
+        }
+
+        .remove_date {
+            opacity: 0.5;
+            display: none;
+            cursor: pointer;
+            position: relative;
+            top: 2px;
+            left: -20px;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        .datepicker {
+            cursor: default;
+        }
+
+        .person_picker {
+            min-width: 206px;
+        }
     }
 
     #show_my_user_profile_modal {
@@ -1942,8 +1942,11 @@ input[type="checkbox"] {
         margin-top: 5px;
     }
 
-    #settings_page .custom_user_field textarea {
-        width: calc(100% - 25px);
+    #settings_page,
+    #edit-user-form {
+        .custom_user_field textarea {
+            width: calc(100% - 25px);
+        }
     }
 }