From d9776159f112f6aa84632033e2b22fb6bf64eafc Mon Sep 17 00:00:00 2001
From: Nikhil Maske <nikhilmaske2001@gmail.com>
Date: Wed, 17 Mar 2021 18:25:02 +0530
Subject: [PATCH] account_settings: Change the position of the
 custom-profile-fields-form.

The custom-profile-fields-form element custom_user_field contains
the textarea for Biography that expands. The textarea treats the
user-avatar-section as an disturbing obstacle when expanded beyond
the certain width. To fix this, the custom-profile-fields-form
is placed out from the account-settings-form.

Fixes #17617.
---
 static/templates/settings/account_settings.hbs | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs
index 110564fdf9..41ea21def4 100644
--- a/static/templates/settings/account_settings.hbs
+++ b/static/templates/settings/account_settings.hbs
@@ -142,14 +142,6 @@
                     </div>
                 </form>
             </div>
-
-            <h3 class="inline-block" id="custom-field-header" {{#unless page_params.custom_profile_fields}}style="display: none"{{/unless}}>{{t "Profile" }}</h3>
-            <form class="form-horizontal custom-profile-fields-form grid"></form>
-            <button class="button rounded sea-green w-200 block" id="show_my_user_profile_modal">
-                {{t 'Preview profile' }}
-                <i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview profile' }}"></i>
-            </button>
-
         </div>
 
         <div class="inline-block user-avatar-section">
@@ -166,6 +158,13 @@
         </div>
         <div class="clear-float"></div>
 
+        <h3 class="inline-block" id="custom-field-header" {{#unless page_params.custom_profile_fields}}style="display: none"{{/unless}}>{{t "Profile" }}</h3>
+        <form class="form-horizontal custom-profile-fields-form grid"></form>
+        <button class="button rounded sea-green w-200 block" id="show_my_user_profile_modal">
+            {{t 'Preview profile' }}
+            <i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview profile' }}"></i>
+        </button>
+
         <div id="deactivate_self_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_self_modal_label" aria-hidden="true">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>