Fix poor UI on CI/CD Variables of Project Settings for mobile64318-poor-ui-on-ci-cd-variables-of-project-settings-v2

Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

8 files changed, 36 insertions, 64 deletions

diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
index 28d7492b99c..b739d1e3f6e 100644
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -16,42 +16,18 @@
 
   &:not(:last-child) {
     margin-bottom: $gl-btn-padding;
-
-    @include media-breakpoint-down(xs) {
-      margin-bottom: 3 * $gl-btn-padding;
-    }
   }
 
   &:last-child {
-    .ci-variable-body-item:last-child {
-      margin-right: $ci-variable-remove-button-width;
-
-      @include media-breakpoint-down(xs) {
-        margin-right: 0;
-      }
-    }
-
-    .ci-variable-row-remove-button {
+    .ci-variable-row-remove-action {
       display: none;
     }
-
-    @include media-breakpoint-down(xs) {
-      .ci-variable-row-body {
-        margin-right: $ci-variable-remove-button-width;
-      }
-    }
   }
 }
 
 .ci-variable-row-body {
-  display: flex;
-  align-items: flex-start;
   width: 100%;
   padding-bottom: $gl-padding;
-
-  @include media-breakpoint-down(xs) {
-    display: block;
-  }
 }
 
 .ci-variable-body-item {
@@ -60,33 +36,26 @@
   &:not(:last-child) {
     margin-right: $gl-btn-padding;
 
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       margin-right: 0;
       margin-bottom: $gl-btn-padding;
     }
   }
 }
 
+.ci-variable-remove-item,
 .ci-variable-masked-item,
 .ci-variable-protected-item {
+  height: $input-height;
   flex: 0 1 auto;
   display: flex;
   align-items: center;
-  padding-top: 5px;
-  padding-bottom: 5px;
 }
 
 .ci-variable-row-remove-button {
   @include transition(color);
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: $ci-variable-remove-button-width;
-  height: $input-height;
-  padding: 0;
-  background: transparent;
   border: 0;
+  background: transparent;
   color: $gl-text-color-secondary;
 
   &:hover,
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index fd6f80e26cb..7c1c9fb14f5 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -51,11 +51,8 @@
   }
 
   @include media-breakpoint-down(sm) {
-    display: flex;
     align-self: stretch;
-    padding: 10px;
     align-items: center;
-    min-height: 62px;
 
     &:not(:first-child) {
       border-top: 1px solid $white-normal;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c108f45622f..671f4c1d628 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -725,11 +725,6 @@ $ci-action-dropdown-button-size: 24px;
 $ci-action-dropdown-svg-size: 12px;
 
 /*
-CI variable lists
-*/
-$ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
-
-/*
 Filtered Search
 */
 $filter-name-resting-color: #f8f8f8;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 79de1d78a6e..ca5bb427b4b 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -78,7 +78,7 @@
   }
 
   @media(max-width: map-get($grid-breakpoints, md)-1) {
-    padding-right: 20px;
+    padding-right: 0;
   }
 
   &::before {
diff --git a/app/views/ci/variables/_variable_header.html.haml b/app/views/ci/variables/_variable_header.html.haml
index d3b7a5ae883..4366d44870b 100644
--- a/app/views/ci/variables/_variable_header.html.haml
+++ b/app/views/ci/variables/_variable_header.html.haml
@@ -1,16 +1,16 @@
 - only_key_value = local_assigns.fetch(:only_key_value, false)
 
-%li.ci-variable-row.m-0.d-none.d-sm-block
+%li.ci-variable-row.m-0.d-none.d-md-block
   .d-flex.w-100.align-items-center.pb-2
     .bold.table-section.section-15.append-right-10
       = s_('CiVariables|Type')
-    .bold.table-section.section-15.append-right-10
+    .bold.table-section.section-25.append-right-10
       = s_('CiVariables|Key')
-    .bold.table-section.section-15.append-right-10
+    .bold.table-section.section-25.append-right-10
       = s_('CiVariables|Value')
     - unless only_key_value
-      .bold.table-section.section-20
-        = s_('CiVariables|State')
-    .bold.table-section.section-20
+      .bold.table-section.section-10.append-right-10
+        = s_('CiVariables|Protected')
+    .bold.table-section.section-10.append-right-10
       = s_('CiVariables|Masked')
     = render_if_exists 'ci/variables/environment_scope_header'
diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml
index ed4bd5ae19e..597af7bb61b 100644
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -20,16 +20,16 @@
 - masked_input_name = "#{form_field}[variables_attributes][][masked]"
 
 %li.js-row.ci-variable-row{ data: { is_persisted: "#{!id.nil?}" } }
-  .ci-variable-row-body.border-bottom
+  .ci-variable-row-body.d-flex.align-items-start.flex-column.flex-md-row
     %input.js-ci-variable-input-id{ type: "hidden", name: id_input_name, value: id }
     %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name }
     %select.js-ci-variable-input-variable-type.ci-variable-body-item.form-control.select-control.custom-select.table-section.section-15{ name: variable_type_input_name }
       = options_for_select(ci_variable_type_options, variable_type)
-    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control.table-section.section-15{ type: "text",
+    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control.table-section.section-25{ type: "text",
       name: key_input_name,
       value: key,
       placeholder: s_('CiVariables|Input variable key') }
-    .ci-variable-body-item.gl-show-field-errors.table-section.section-15.border-top-0.p-0
+    .ci-variable-body-item.gl-show-field-errors.table-section.section-25.border-top-0.p-0
       .form-control.js-secret-value-placeholder.qa-ci-variable-input-value{ class: ('hide' unless id) }
         = '*' * 17
       %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ class: ('hide' if id),
@@ -37,12 +37,12 @@
         name: value_input_name,
         placeholder: s_('CiVariables|Input variable value') }
         = value
-      %p.masking-validation-error.gl-field-error.hide
+      %p.masking-validation-error.gl-field-error.mb-0.hide
         = s_("CiVariables|Cannot use Masked Variable with current value")
         = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'masked-variables'), target: '_blank', rel: 'noopener noreferrer'
     - unless only_key_value
-      .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0
-        .append-right-default
+      .ci-variable-body-item.ci-variable-protected-item.table-section.section-10.border-top-0
+        .bold.d-block.d-md-none.flex-grow-1.flex-md-grow-0
           = s_("CiVariable|Protected")
         %button{ type: 'button',
           class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if is_protected}",
@@ -55,8 +55,8 @@
           %span.toggle-icon
             = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
             = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
-      .ci-variable-body-item.ci-variable-masked-item.table-section.section-20.mr-0.border-top-0
-        .append-right-default
+      .ci-variable-body-item.ci-variable-masked-item.table-section.section-10.border-top-0
+        .bold.d-block.d-md-none.flex-grow-1.flex-md-grow-0
           = s_("CiVariable|Masked")
         %button{ type: 'button',
           class: "js-project-feature-toggle project-feature-toggle qa-variable-masked #{'is-checked' if is_masked}",
@@ -70,5 +70,8 @@
             = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
             = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
       = render_if_exists 'ci/variables/environment_scope', form_field: form_field, variable: variable
-    %button.js-row-remove-button.ci-variable-row-remove-button.table-section.section-5.border-top-0{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
-      = icon('minus-circle')
+    .ci-variable-remove-item.ci-variable-row-remove-action.table-section.section-5.border-top-0
+      .bold.d-block.d-md-none.flex-grow-1.flex-md-grow-0
+        = s_("CiVariable|Delete")
+      %button.btn.btn-remove.js-row-remove-button.ci-variable-row-remove-button.align-items-center.justify-content-center{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
+        = icon('trash-o')
diff --git a/changelogs/unreleased/64318-poor-ui-on-ci-cd-variables-of-project-settings.yml b/changelogs/unreleased/64318-poor-ui-on-ci-cd-variables-of-project-settings.yml
new file mode 100644
index 00000000000..926fe15356a
--- /dev/null
+++ b/changelogs/unreleased/64318-poor-ui-on-ci-cd-variables-of-project-settings.yml
@@ -0,0 +1,5 @@
+---
+title: Fix poor UI on CI/CD Variables of Project Settings for mobile
+merge_request: 30509
+author: Takuya Noguchi
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7dd6e0f2a93..7bcfec22599 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2260,6 +2260,9 @@ msgstr ""
 msgid "CiVariables|Masked"
 msgstr ""
 
+msgid "CiVariables|Protected"
+msgstr ""
+
 msgid "CiVariables|Remove variable row"
 msgstr ""
 
@@ -2269,9 +2272,6 @@ msgstr ""
 msgid "CiVariables|Specify variable values to be used in this run. The values specified in %{linkStart}CI/CD settings%{linkEnd} will be used as default"
 msgstr ""
 
-msgid "CiVariables|State"
-msgstr ""
-
 msgid "CiVariables|Type"
 msgstr ""
 
@@ -2290,6 +2290,9 @@ msgstr ""
 msgid "CiVariable|Create wildcard"
 msgstr ""
 
+msgid "CiVariable|Delete"
+msgstr ""
+
 msgid "CiVariable|Error occurred while saving variables"
 msgstr ""