Resolve "Mobile view for pod logs has an alignment issue"

app/assets/stylesheets/pages/builds.scss

@@ -130,66 +130,6 @@
   }
 }
 
-.build-page-pod-logs {
-  .build-trace-container {
-    position: relative;
-  }
-
-  .build-trace {
-    @include build-trace();
-  }
-
-  .top-bar {
-    @include build-trace-top-bar(48px, $header-height-pod-logs);
-    display: flex;
-    border-top-left-radius: $border-radius-default;
-    border-top-right-radius: $border-radius-default;
-
-    .truncated-info {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .dropdown {
-      display: flex;
-
-      > .dropdown-menu-toggle {
-        display: flex;
-        align-content: center;
-        align-self: center;
-        width: 300px;
-      }
-
-      > .dropdown-menu {
-        width: 300px;
-      }
-    }
-
-    .controllers {
-      @include build-controllers(16px, flex-end, true, 2);
-    }
-
-    .refresh-control {
-      @include build-controllers(16px, flex-end, true, 0);
-      margin-left: 2px;
-
-      .controllers-buttons {
-        .btn-refresh {
-          border-radius: 4px;
-          width: 32px;
-          height: 32px;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-
-  .build-loader-animation {
-    @include build-loader-animation();
-  }
-}
-
 .build-header {
   .ci-header-container,
   .header-action-buttons {

ee/app/assets/javascripts/kubernetes_logs.js

@@ -78,7 +78,7 @@ export default class KubernetesPodLogs extends LogOutputBehaviours {
 
     this.$podDropdown
       .find('.dropdown-menu-toggle')
-      .html(`${this.podName}<i class="fa fa-chevron-down"></i>`);
+      .html(`<span class="dropdown-toggle-text">${this.podName}</span><i class="fa fa-chevron-down"></i>`);
     $podDropdownMenu.off('click');
     $podDropdownMenu.empty();
 

ee/app/assets/stylesheets/pages/builds.scss

+.build-page-pod-logs {
+  .build-trace-container {
+    position: relative;
+  }
+
+  .build-trace {
+    @include build-trace();
+  }
+
+  .top-bar {
+    @include build-trace-top-bar(48px, $header-height-pod-logs);
+    display: flex;
+
+    .truncated-info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .dropdown {
+      display: flex;
+
+      > .dropdown-menu-toggle {
+        display: flex;
+        align-content: center;
+        align-self: center;
+        width: 200px;
+
+        @include media-breakpoint-up(sm) {
+          width: 300px;
+        }
+      }
+
+      > .dropdown-menu {
+        width: 300px;
+      }
+
+      .dropdown-toggle-text {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+
+    .controllers {
+      @include build-controllers(16px, flex-end, true, 2);
+    }
+
+    .refresh-control {
+      @include build-controllers(16px, flex-end, true, 0);
+      margin-left: 2px;
+
+      .controllers-buttons {
+        .btn-refresh {
+          height: 32px;
+
+          svg {
+            top: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .build-loader-animation {
+    @include build-loader-animation();
+  }
+}

ee/app/views/projects/environments/logs.html.haml

@@ -2,22 +2,22 @@
   .build-page-pod-logs
     .build-trace-container.prepend-top-default
       .top-bar.js-top-bar
-        .truncated-info.hidden-xs.pull-left
+        .truncated-info.d-none.d-md-flex.append-right-8
           = s_('Environments|Pod logs from')
-        .dropdown.prepend-left-10.js-pod-dropdown
+        .dropdown.js-pod-dropdown
           %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' }, 'aria-expanded': false }
             = icon('chevron-down')
           .dropdown-menu.dropdown-menu-selectable.dropdown-menu-drop-up
-        .controllers.pull-right
+        .controllers
           .has-tooltip.controllers-buttons{ title: _('Scroll to top'), data: { placement: 'top', container: 'body'} }
             %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
               = custom_icon('scroll_up')
           .has-tooltip.controllers-buttons{ title: _('Scroll to bottom'), data: { placement: 'top', container: 'body'} }
             %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
               = custom_icon('scroll_down')
-          .refresh-control.pull-right
+          .refresh-control
             .has-tooltip.controllers-buttons{ title: _('Refresh'), data: { placement: 'top', container: 'body'} }
-              %button.js-refresh-log.btn-default.btn-refresh{ type: 'button', disabled: true }
+              %button.js-refresh-log.btn.btn-default.btn-refresh{ type: 'button', disabled: true }
                 = sprite_icon('retry')
 
       = render 'shared/builds/build_output'

ee/changelogs/unreleased/6963-pod-log-mobile.yml

+---
+title: Fix mobile view of pod logs
+merge_request: 6597
+author:
+type: fixed