fixed breakpoint

disable stop button when loading

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

 <script>
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import tooltip from '../../vue_shared/directives/tooltip';
+import LoadingButton from '../../vue_shared/components/loading_button.vue';
 import { visitUrl } from '../../lib/utils/url_utility';
 import createFlash from '../../flash';
 import MemoryUsage from './memory_usage.vue';
@@ -10,6 +11,7 @@ import MRWidgetService from '../services/mr_widget_service';
 export default {
   name: 'Deployment',
   components: {
+    LoadingButton,
     MemoryUsage,
     StatusIcon,
   },
@@ -25,6 +27,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isStopping: false,
+    };
+  },
   computed: {
     deployTimeago() {
       return this.timeFormated(this.deployment.deployed_at);
@@ -43,19 +50,26 @@ export default {
     },
   },
   methods: {
-    stopEnvironment(deployment) {
+    stopEnvironment() {
       const msg = 'Are you sure you want to stop this environment?';
       const isConfirmed = confirm(msg); // eslint-disable-line
 
       if (isConfirmed) {
-        MRWidgetService.stopEnvironment(deployment.stop_url)
+        this.isStopping = true;
+
+        MRWidgetService.stopEnvironment(this.deployment.stop_url)
           .then(res => res.data)
           .then((data) => {
             if (data.redirect_url) {
               visitUrl(data.redirect_url);
             }
+
+            this.isStopping = false;
           })
-          .catch(() => createFlash('Something went wrong while stopping this environment. Please try again.'));
+          .catch(() => {
+            createFlash('Something went wrong while stopping this environment. Please try again.');
+            this.isStopping = false;
+          });
       }
     },
   },
@@ -72,33 +86,32 @@ export default {
       </div>
       <div class="media-body">
         <div class="deploy-body">
-          <span
-            v-if="hasDeploymentMeta"
-          >
+          <template v-if="hasDeploymentMeta">
+            <span>
               Deployed to
             </span>
             <span class="deploy-link">
               <a
-              v-if="hasDeploymentMeta"
                 :href="deployment.url"
                 target="_blank"
                 rel="noopener noreferrer nofollow"
-              class="js-deploy-meta">
+                class="js-deploy-meta"
+              >
                 {{ deployment.name }}
               </a>
             </span>
-          <span
-            v-if="hasExternalUrls"
-          >
+          </template>
+          <template v-if="hasExternalUrls">
+            <span>
               on
             </span>
             <span class="deploy-link">
               <a
-              v-if="hasExternalUrls"
                 :href="deployment.external_url"
                 target="_blank"
                 rel="noopener noreferrer nofollow"
-              class="js-deploy-url">
+                class="js-deploy-url"
+              >
                 <i
                   class="fa fa-external-link"
                   aria-hidden="true"
@@ -107,21 +120,23 @@ export default {
                 {{ deployment.external_url_formatted }}
               </a>
             </span>
+          </template>
           <span
             v-if="hasDeploymentTime"
             :data-title="deployment.deployed_at_formatted"
             class="js-deploy-time"
             data-toggle="tooltip"
-            data-placement="top">
+            data-placement="top"
+          >
             {{ deployTimeago }}
           </span>
-          <button
-            type="button"
+          <loading-button
             v-if="deployment.stop_url"
-            @click="stopEnvironment(deployment)"
-            class="btn btn-default btn-xs">
-            Stop environment
-          </button>
+            container-class="btn btn-default btn-xs"
+            label="Stop environment"
+            :loading="isStopping"
+            @click="stopEnvironment"
+          />
         </div>
         <memory-usage
           v-if="hasMetrics"

app/assets/stylesheets/pages/merge_requests.scss

@@ -740,7 +740,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  @media (min-width: $screen-md-min) {
+  @media (min-width: $screen-xs) {
     flex-wrap: nowrap;
     white-space: nowrap;
   }
@@ -761,7 +761,8 @@
   min-width: 100px;
   max-width: 150px;
 
-  @media (min-width: $screen-md-min) {
+  @media (min-width: $screen-xs) {
+    min-width: 0;
     max-width: 100%;
   }
 }