Fix alignment of protected tag and branch labels on mobile

app/views/projects/protected_branches/shared/_create_protected_branch.html.haml

@@ -6,8 +6,7 @@
     .card-body
       = form_errors(@protected_branch)
       .form-group.row
-        .col-md-2.text-right
-          = f.label :name, 'Branch:'
+        = f.label :name, s_('ProtectedBranch|Branch:'), class: 'col-md-2 text-left text-md-right'
         .col-md-10
           = render partial: "projects/protected_branches/shared/dropdown", locals: { f: f }
           .form-text.text-muted
@@ -15,15 +14,13 @@
             - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
             = (s_("ProtectedBranch|%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}*-stable%{code_tag_end} or %{code_tag_start}production/*%{code_tag_end} are supported.") % { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>', code_tag_start: '<code>', code_tag_end: '</code>' }).html_safe
       .form-group.row
-        %label.col-md-2.text-right{ for: 'merge_access_levels_attributes' }
-          = s_("ProtectedBranch|Allowed to merge:")
+        = f.label :merge_access_levels_attributes, s_("ProtectedBranch|Allowed to merge:"), class: 'col-md-2 text-left text-md-right'
         .col-md-10
           = yield :merge_access_levels
       .form-group.row
-        %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
-          = s_("ProtectedBranch|Allowed to push:")
+        = f.label :push_access_levels_attributes, s_("ProtectedBranch|Allowed to push:"), class: 'col-md-2 text-left text-md-right'
         .col-md-10
           = yield :push_access_levels
-      = render_if_exists 'projects/protected_branches/ee/code_owner_approval_form'
+      = render_if_exists 'projects/protected_branches/ee/code_owner_approval_form', f: f
     .card-footer
       = f.submit s_('ProtectedBranch|Protect'), class: 'btn-success btn', disabled: true, data: { qa_selector: 'protect_button' }

app/views/projects/protected_tags/shared/_create_protected_tag.html.haml

@@ -2,24 +2,19 @@
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-tags-settings' }
   .card
     .card-header
-      Protect a tag
+      = _('Protect a tag')
     .card-body
       = form_errors(@protected_tag)
       .form-group.row
-        .col-md-2.text-right
-          = f.label :name, 'Tag:'
+        = f.label :name, _('Tag:'), class: 'col-md-2 text-left text-md-right'
         .col-md-10.protected-tags-dropdown
           = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f }
           .form-text.text-muted
-            = link_to 'Wildcards', help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags')
-            such as
-            %code v*
-            or
-            %code *-release
-            are supported.
+            - wildcards_url = help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags')
+            - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
+            = html_escape(_("%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}v*%{code_tag_end} or %{code_tag_start}*-release%{code_tag_end} are supported.")) % { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>'.html_safe, code_tag_start: '<code>'.html_safe, code_tag_end: '</code>'.html_safe }
       .form-group.row
-        %label.col-md-2.text-right{ for: 'create_access_levels_attributes' }
-          Allowed to create:
+        = f.label :create_access_levels_attributes, _('Allowed to create:'), class: 'col-md-2 text-left text-md-right'
         .col-md-10
           .create_access_levels-container
             = yield :create_access_levels

changelogs/unreleased/Fix-alignment-of-protected-tag-labels-on-mobile.yml

+---
+title: Fix alignment of protected tag and branch labels on mobile
+merge_request: 51100
+author: Kev @KevSlashNull
+type: fixed

ee/app/views/projects/protected_branches/ee/_code_owner_approval_form.html.haml

 - if @project.feature_available?(:code_owner_approval_required)
   .form-group.row
-    %label.col-md-2.text-right{ for: 'code_owner_approval_required' }
-      = s_("ProtectedBranch|Require approval from code owners:")
+    = f.label :code_owner_approval_required, s_("ProtectedBranch|Require approval from code owners:"), class: 'col-md-2 text-left text-md-right'
     .col-md-10
       = render "shared/buttons/project_feature_toggle", label: s_("ProtectedBranch|Toggle code owner approval"), class_list: "js-code-owner-toggle project-feature-toggle is-checked"
       .form-text.text-muted

locale/gitlab.pot

@@ -912,6 +912,9 @@ msgstr ""
 msgid "%{webhooks_link_start}%{webhook_type}%{link_end} enable you to send notifications to web applications in response to events in a group or project. We recommend using an %{integrations_link_start}integration%{link_end} in preference to a webhook."
 msgstr ""
 
+msgid "%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}v*%{code_tag_end} or %{code_tag_start}*-release%{code_tag_end} are supported."
+msgstr ""
+
 msgid "< 1 hour"
 msgstr ""
 
@@ -2946,6 +2949,9 @@ msgstr ""
 msgid "Allowed email domain restriction only permitted for top-level groups"
 msgstr ""
 
+msgid "Allowed to create:"
+msgstr ""
+
 msgid "Allowed to fail"
 msgstr ""
 
@@ -22920,6 +22926,9 @@ msgstr ""
 msgid "Protect"
 msgstr ""
 
+msgid "Protect a tag"
+msgstr ""
+
 msgid "Protect variable"
 msgstr ""
 
@@ -22968,6 +22977,9 @@ msgstr ""
 msgid "ProtectedBranch|Branch"
 msgstr ""
 
+msgid "ProtectedBranch|Branch:"
+msgstr ""
+
 msgid "ProtectedBranch|Code owner approval"
 msgstr ""
 
@@ -27487,6 +27499,9 @@ msgstr ""
 msgid "Tag this commit."
 msgstr ""
 
+msgid "Tag:"
+msgstr ""
+
 msgid "Tagged this commit to %{tag_name} with \"%{message}\"."
 msgstr ""