Fix checkbox alignment in application settings

Add the form-control CSS class to the feature checkboxes on the
application settings page to fix the vertical alignment with their
labels.  Also add aria-describedby attributes to form controls that have
a help text block.

CHANGELOG

@@ -11,6 +11,7 @@ v 7.9.0 (unreleased)
   - Fix ordering of imported but unchanged projects (Marco Wessel)
   - Mobile UI improvements: make aside content expandable
   - Expose avatar_url in projects API
+  - Fix checkbox alignment on the application settings page.
   - Generalize image upload in drag and drop in markdown to all files (Hannes Rosenögger)
   - Fix mass-unassignment of issues (Robert Speicher)
   - Allow user confirmation to be skipped for new users via API

app/views/admin/application_settings/_form.html.haml

@@ -8,39 +8,39 @@
   %fieldset
     %legend Features
     .form-group
-      = f.label :signup_enabled, class: 'control-label'
+      = f.label :signup_enabled, class: 'control-label col-sm-2'
       .col-sm-10
-        = f.check_box :signup_enabled, class: 'checkbox'
+        = f.check_box :signup_enabled, class: 'checkbox form-control'
     .form-group
-      = f.label :signin_enabled, class: 'control-label'
+      = f.label :signin_enabled, class: 'control-label col-sm-2'
       .col-sm-10
-        = f.check_box :signin_enabled, class: 'checkbox'
+        = f.check_box :signin_enabled, class: 'checkbox form-control'
     .form-group
-      = f.label :gravatar_enabled, class: 'control-label'
+      = f.label :gravatar_enabled, class: 'control-label col-sm-2'
       .col-sm-10
-        = f.check_box :gravatar_enabled, class: 'checkbox'
+        = f.check_box :gravatar_enabled, class: 'checkbox form-control'
     .form-group
-      = f.label :twitter_sharing_enabled, "Twitter enabled", class: 'control-label'
+      = f.label :twitter_sharing_enabled, "Twitter enabled", class: 'control-label col-sm-2'
       .col-sm-10
-        = f.check_box :twitter_sharing_enabled, class: 'checkbox'
-        %span.help-block Show users button to share their newly created public or internal projects on twitter
+        = f.check_box :twitter_sharing_enabled, class: 'checkbox form-control', :'aria-describedby' => 'twitter_help_block'
+        %span.help-block#twitter_help_block Show users a button to share their newly created public or internal projects on twitter
   %fieldset
     %legend Misc
     .form-group
-      = f.label :default_projects_limit, class: 'control-label'
+      = f.label :default_projects_limit, class: 'control-label col-sm-2'
       .col-sm-10
         = f.number_field :default_projects_limit, class: 'form-control'
     .form-group
-      = f.label :default_branch_protection, class: 'control-label'
+      = f.label :default_branch_protection, class: 'control-label col-sm-2'
       .col-sm-10
         = f.select :default_branch_protection, options_for_select(Gitlab::Access.protection_options, @application_setting.default_branch_protection), {}, class: 'form-control'
     .form-group
-      = f.label :home_page_url, class: 'control-label'
+      = f.label :home_page_url, class: 'control-label col-sm-2'
       .col-sm-10
-        = f.text_field :home_page_url, class: 'form-control', placeholder: 'http://company.example.com'
-        %span.help-block We will redirect non-logged in users to this page
+        = f.text_field :home_page_url, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'home_help_block'
+        %span.help-block#home_help_block We will redirect non-logged in users to this page
     .form-group
-      = f.label :sign_in_text, class: 'control-label'
+      = f.label :sign_in_text, class: 'control-label col-sm-2'
       .col-sm-10
         = f.text_area :sign_in_text, class: 'form-control', rows: 4
         .help-block Markdown enabled