Fix broken UI on Environment folder

app/assets/javascripts/environments/folder/environments_folder_view.vue

@@ -40,13 +40,13 @@ export default {
   <div :class="cssContainerClass">
     <stop-environment-modal :environment="environmentInStopModal" />
 
-    <div v-if="!isLoading" class="top-area">
-      <h4 class="js-folder-name environments-folder-name">
-        {{ s__('Environments|Environments') }} /
-        <b>{{ folderName }}</b>
-      </h4>
+    <h4 class="js-folder-name environments-folder-name">
+      {{ s__('Environments|Environments') }} /
+      <b>{{ folderName }}</b>
+    </h4>
 
-      <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
+    <div class="top-area">
+      <tabs v-if="!isLoading" :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
     </div>
 
     <container

app/assets/stylesheets/pages/environments.scss

@@ -7,7 +7,6 @@
 
 .environments-folder-name {
   font-weight: $gl-font-weight-normal;
-  padding-top: 20px;
 }
 
 .environments-container {

app/views/projects/environments/folder.html.haml

-- page_title _("Environments")
+- add_to_breadcrumbs _("Environments"), project_environments_path(@project)
+- breadcrumb_title _("Folder/%{name}") % { name: @folder }
+- page_title _("Environments in %{name}") % { name: @folder }
 
 #environments-folder-list-view{ data: { environments_data: environments_folder_list_view_data } }

changelogs/unreleased/32470-ui-degradation-on-environment-folder-view.yml

+---
+title: Fix broken UI on Environment folder
+merge_request: 17427
+author: Takuya Noguchi
+type: fixed

locale/gitlab.pot

@@ -6482,6 +6482,9 @@ msgstr ""
 msgid "Environments allow you to track deployments of your application %{link_to_read_more}."
 msgstr ""
 
+msgid "Environments in %{name}"
+msgstr ""
+
 msgid "EnvironmentsDashboard|Add a project to the dashboard"
 msgstr ""
 
@@ -7639,6 +7642,9 @@ msgstr ""
 msgid "FogBugz import"
 msgstr ""
 
+msgid "Folder/%{name}"
+msgstr ""
+
 msgid "Follow the steps below to export your Google Code project data."
 msgstr ""