FIX: Adjust placement and animation of labels for custom user fields (#24201)

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>

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>

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"}}

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,

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;
+  }
+}

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 {