Merge branch '49770-fixes-input-alignment-on-user-admin-form-with-errors' into 'master'

Resolve "Admin > New user form > Error state > Inputs misaligned"

Closes #49770

See merge request gitlab-org/gitlab-ce!21108

3 files changed, 35 insertions, 15 deletions

diff --git a/app/views/admin/users/_access_levels.html.haml b/app/views/admin/users/_access_levels.html.haml
index 04acc5f8423..5f68163163e 100644
--- a/app/views/admin/users/_access_levels.html.haml
+++ b/app/views/admin/users/_access_levels.html.haml
@@ -1,15 +1,18 @@
 %fieldset
   %legend Access
   .form-group.row
-    = f.label :projects_limit, class: 'col-form-label col-sm-2'
+    .col-sm-2.text-right
+      = f.label :projects_limit, class: 'col-form-label'
     .col-sm-10= f.number_field :projects_limit, min: 0, max: Gitlab::Database::MAX_INT_VALUE, class: 'form-control'
 
   .form-group.row
-    = f.label :can_create_group, class: 'col-form-label col-sm-2'
+    .col-sm-2.text-right
+      = f.label :can_create_group, class: 'col-form-label'
     .col-sm-10= f.check_box :can_create_group
 
   .form-group.row
-    = f.label :access_level, class: 'col-form-label col-sm-2'
+    .col-sm-2.text-right
+      = f.label :access_level, class: 'col-form-label'
     .col-sm-10
       - editing_current_user = (current_user == @user)
 
@@ -29,7 +32,8 @@
           You cannot remove your own admin rights.
 
   .form-group.row
-    = f.label :external, class: 'col-form-label col-sm-2'
+    .col-sm-2.text-right
+      = f.label :external, class: 'col-form-label'
     .col-sm-10
       = f.check_box :external do
         External
diff --git a/app/views/admin/users/_form.html.haml b/app/views/admin/users/_form.html.haml
index 58be07fc83e..7f21bdb91c8 100644
--- a/app/views/admin/users/_form.html.haml
+++ b/app/views/admin/users/_form.html.haml
@@ -5,17 +5,20 @@
     %fieldset
       %legend Account
       .form-group.row
-        = f.label :name, class: 'col-form-label col-sm-2'
+        .col-sm-2.text-right
+          = f.label :name, class: 'col-form-label'
         .col-sm-10
           = f.text_field :name, required: true, autocomplete: 'off', class: 'form-control'
           %span.help-inline * required
       .form-group.row
-        = f.label :username, class: 'col-form-label col-sm-2'
+        .col-sm-2.text-right
+          = f.label :username, class: 'col-form-label'
         .col-sm-10
           = f.text_field :username, required: true, autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', spellcheck: false, class: 'form-control'
           %span.help-inline * required
       .form-group.row
-        = f.label :email, class: 'col-form-label col-sm-2'
+        .col-sm-2.text-right
+          = f.label :email, class: 'col-form-label'
         .col-sm-10
           = f.text_field :email, required: true, autocomplete: 'off', class: 'form-control'
           %span.help-inline * required
@@ -24,7 +27,8 @@
       %fieldset
         %legend Password
         .form-group.row
-          = f.label :password, class: 'col-form-label col-sm-2'
+          .col-sm-2.text-right
+            = f.label :password, class: 'col-form-label'
           .col-sm-10
             %strong
               Reset link will be generated and sent to the user.
@@ -34,10 +38,12 @@
       %fieldset
         %legend Password
         .form-group.row
-          = f.label :password, class: 'col-form-label col-sm-2'
+          .col-sm-2.text-right
+            = f.label :password, class: 'col-form-label'
           .col-sm-10= f.password_field :password, disabled: f.object.force_random_password, class: 'form-control'
         .form-group.row
-          = f.label :password_confirmation, class: 'col-form-label col-sm-2'
+          .col-sm-2.text-right
+            = f.label :password_confirmation, class: 'col-form-label'
           .col-sm-10= f.password_field :password_confirmation, disabled: f.object.force_random_password, class: 'form-control'
 
     = render partial: 'access_levels', locals: { f: f }
@@ -45,21 +51,26 @@
     %fieldset
       %legend Profile
       .form-group.row
-        = f.label :avatar, class: 'col-form-label col-sm-2'
+        .col-sm-2.text-right
+          = f.label :avatar, class: 'col-form-label'
         .col-sm-10
           = f.file_field :avatar
 
       .form-group.row
-        = f.label :skype, class: 'col-form-label col-sm-2'
+        .col-sm-2.text-right
+          = f.label :skype, class: 'col-form-label'
         .col-sm-10= f.text_field :skype, class: 'form-control'
       .form-group.row
-        = f.label :linkedin, class: 'col-form-label col-sm-2'
+        .col-sm-2.text-right
+          = f.label :linkedin, class: 'col-form-label'
         .col-sm-10= f.text_field :linkedin, class: 'form-control'
       .form-group.row
-        = f.label :twitter, class: 'col-form-label col-sm-2'
+        .col-sm-2.text-right
+          = f.label :twitter, class: 'col-form-label'
         .col-sm-10= f.text_field :twitter, class: 'form-control'
       .form-group.row
-        = f.label :website_url, 'Website', class: 'col-form-label col-sm-2'
+        .col-sm-2.text-right
+          = f.label :website_url, 'Website', class: 'col-form-label'
         .col-sm-10= f.text_field :website_url, class: 'form-control'
 
     .form-actions
diff --git a/changelogs/unreleased/49770-fixes-input-alignment-on-user-admin-form-with-errors.yml b/changelogs/unreleased/49770-fixes-input-alignment-on-user-admin-form-with-errors.yml
new file mode 100644
index 00000000000..00e1f6e638a
--- /dev/null
+++ b/changelogs/unreleased/49770-fixes-input-alignment-on-user-admin-form-with-errors.yml
@@ -0,0 +1,5 @@
+---
+title: Fixes input alignment in user admin form with errors
+merge_request: 21108
+author: Jacopo Beschi @jacopo-beschi
+type: fixed