From 88bb5fa773bac5568f31edf36113b557b0a08ae7 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Wed, 1 Nov 2023 14:51:40 -0500
Subject: [PATCH] FIX: Adjust placement and animation of labels for custom user
 fields (#24201)

---
 .../app/components/user-fields/dropdown.hbs   |  5 ++++-
 .../components/user-fields/multiselect.hbs    |  5 ++++-
 .../app/components/user-fields/text.hbs       | 11 ++++++----
 app/assets/stylesheets/common/base/login.scss |  1 -
 app/assets/stylesheets/common/base/user.scss  | 20 +++++++++++++++++++
 app/assets/stylesheets/desktop/login.scss     |  1 +
 6 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs b/app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
index 6014cd6186d..7a886699814 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
@@ -1,4 +1,7 @@
-<label class="control-label" for={{concat "user-" this.elementId}}>
+<label
+  class="control-label alt-placeholder"
+  for={{concat "user-" this.elementId}}
+>
   {{this.field.name}}
   {{#if this.field.required}}
     <span class="required">*</span>
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs b/app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
index 40007aeecbd..60748859626 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
@@ -1,4 +1,7 @@
-<label class="control-label" for={{concat "user-" this.elementId}}>
+<label
+  class="control-label alt-placeholder"
+  for={{concat "user-" this.elementId}}
+>
   {{this.field.name}}
   {{#if this.field.required}}
     <span class="required">*</span>
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/text.hbs b/app/assets/javascripts/discourse/app/components/user-fields/text.hbs
index a34f7680c80..7f25661e6fa 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/text.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-fields/text.hbs
@@ -1,13 +1,16 @@
 <div class="controls">
-  <label class="control-label" for={{concat "user-" this.elementId}}>
-    {{this.field.name}}
-    {{#if this.field.required}}<span class="required">*</span>{{/if}}
-  </label>
   <Input
     id={{concat "user-" this.elementId}}
     @value={{this.value}}
     maxlength={{this.site.user_field_max_length}}
   />
+  <label
+    class="control-label alt-placeholder"
+    for={{concat "user-" this.elementId}}
+  >
+    {{this.field.name}}
+    {{#if this.field.required}}<span class="required">*</span>{{/if}}
+  </label>
   <InputTip
     @validation={{this.validation}}
     class={{unless this.validation " hidden"}}
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 43c054a87b5..fb6b61bfe20 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -177,7 +177,6 @@ body.invite-page {
         top: -8px;
         left: calc(1em - 0.25em);
         background-color: var(--secondary);
-        padding: 0 0.25em 0 0.25em;
         font-size: $font-down-1;
       }
       .user-field.text:focus-within,
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 0bb4bf8197e..9fa9aa632f8 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -972,3 +972,23 @@
     }
   }
 }
+
+// Due to special login animations, the order here needs to be changed
+.control-group[data-setting-name="user-user-fields"]
+  .user-field.text
+  .controls {
+  display: flex;
+  flex-direction: column;
+  .control-label.alt-placeholder {
+    order: 1;
+  }
+  .ember-text-field {
+    order: 2;
+  }
+  .tip {
+    order: 3;
+  }
+  .instructions {
+    order: 4;
+  }
+}
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 4e9fe4dc145..d57cbde0f33 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -311,6 +311,7 @@
       input.value-entered + label.alt-placeholder {
         top: -8px;
         left: calc(3em - 0.25em);
+        font-size: var(--font-down-1);
       }
     }
     .password-confirmation {