Merge branch '6349-geo-bootstrap4-regressions' into 'master'

Resolve "Geo: bootstrap4 regressions"

Closes #6349

See merge request gitlab-org/gitlab-ee!6084

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

@@ -42,7 +42,7 @@
         return this.isNodeHTTP || this.nodeDetailsFailed;
       },
       nodeStatusIconClass() {
-        const iconClasses = 'prepend-left-10 float-left node-status-icon';
+        const iconClasses = 'prepend-left-10 node-status-icon';
         if (this.nodeDetailsFailed) {
           return `${iconClasses} status-icon-failure`;
         }
@@ -68,27 +68,29 @@
   <div class="card-header">
     <div class="row">
       <div class="col-md-8 clearfix">
-        <strong class="node-url inline float-left">
-          {{ node.url }}
-        </strong>
-        <loading-icon
-          v-if="nodeDetailsLoading || node.nodeActionActive"
-          class="node-details-loading prepend-left-10 float-left inline"
-        />
-        <icon
-          v-tooltip
-          v-if="showNodeStatusIcon"
-          :name="nodeStatusIconName"
-          :size="18"
-          :css-classes="nodeStatusIconClass"
-          :title="nodeStatusIconTooltip"
-          data-container="body"
-          data-placement="bottom"
-        />
-        <span class="inline float-left prepend-left-10">
+        <span class="d-flex float-left append-right-10">
+          <strong class="node-url">
+            {{ node.url }}
+          </strong>
+          <loading-icon
+            v-if="nodeDetailsLoading || node.nodeActionActive"
+            class="node-details-loading prepend-left-10 inline"
+          />
+          <icon
+            v-tooltip
+            v-if="showNodeStatusIcon"
+            :name="nodeStatusIconName"
+            :size="18"
+            :css-classes="nodeStatusIconClass"
+            :title="nodeStatusIconTooltip"
+            data-container="body"
+            data-placement="bottom"
+          />
+        </span>
+        <span class="inline node-type-badges">
           <span
             v-if="node.current"
-            class="prepend-left-5 node-badge current-node"
+            class="node-badge current-node"
           >
             {{ s__('Current node') }}
           </span>

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_main.vue

@@ -48,7 +48,7 @@
 
 <template>
   <div class="row-fluid clearfix node-detail-section primary-section">
-    <div class="col-md-8">
+    <div class="col-md-8 section-items-container">
       <div class="detail-section-item node-version">
         <div class="node-detail-title">
           {{ s__('GeoNodes|GitLab version') }}

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

@@ -129,11 +129,17 @@
   }
 
   .section-items-container {
+    display: inline-block;
+
     .node-detail-item {
       &:first-child {
         margin-top: 0;
       }
     }
+
+    @include media-breakpoint-down(sm) {
+      width: 95%;
+    }
   }
 }
 

ee/app/views/shared/_geo_info_modal.html.haml

@@ -2,9 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title
           How to work faster with Geo
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
       .modal-body
         %p
           %strong= 'Step 1.'