Update CSS to avoid custom styles

Use margin instead of width for loading button

app/assets/javascripts/jira_connect/components/app.vue

@@ -92,7 +92,7 @@ export default {
 
     <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
 
-    <div class="jira-connect-app-body gl-my-7 gl-pb-4">
+    <div class="jira-connect-app-body gl-my-7 gl-px-5 gl-pb-4">
       <div class="gl-display-flex gl-justify-content-end">
         <gl-button
           v-if="usersPath"

app/assets/javascripts/jira_connect/components/subscriptions_list.vue

@@ -38,7 +38,7 @@ export default {
     {
       key: 'actions',
       label: '',
-      tdClass: 'gl-text-right gl-vertical-align-middle! jira-subscription-actions',
+      tdClass: 'gl-text-right gl-vertical-align-middle! gl-pl-0!',
     },
   ],
   i18n: {
@@ -49,6 +49,12 @@ export default {
   },
   methods: {
     isEmpty,
+    isLoadingItem(item) {
+      return this.loadingItem === item;
+    },
+    unlinkBtnClass(item) {
+      return this.isLoadingItem(item) ? '' : 'gl-ml-6';
+    },
     onClick(item) {
       this.loadingItem = item;
 
@@ -80,8 +86,9 @@ export default {
       </template>
       <template #cell(actions)="{ item }">
         <gl-button
+          :class="unlinkBtnClass(item)"
           category="secondary"
-          :loading="loadingItem === item"
+          :loading="isLoadingItem(item)"
           @click.prevent="onClick(item)"
           >{{ __('Unlink') }}</gl-button
         >

app/assets/stylesheets/page_bundles/jira_connect.scss

@@ -57,8 +57,6 @@ $header-height: 40px;
 
 .jira-connect-app-body {
   max-width: 768px;
-  padding-left: 15px;
-  padding-right: 15px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -100,7 +98,3 @@ svg {
     }
   }
 }
-
-.jira-subscription-actions {
-  width: 88px;
-}

app/views/jira_connect/subscriptions/index.html.haml

@@ -10,7 +10,7 @@
 
 %main.jira-connect-app.gl-px-5.gl-pt-7.gl-mx-auto
   - if current_user.blank? && @subscriptions.empty?
-    .jira-connect-app-body.gl-text-center
+    .jira-connect-app-body.gl-px-5.gl-text-center
       %h2= s_('JiraService|GitLab for Jira Configuration')
       %p= s_('JiraService|Sign in to GitLab.com to get started.')
 
@@ -22,7 +22,7 @@
   - else
     .js-jira-connect-app{ data: jira_connect_app_data(@subscriptions) }
 
-  %p.jira-connect-app-body.gl-mt-7.gl-font-base.gl-text-center
+  %p.jira-connect-app-body.gl-px-5.gl-mt-7.gl-font-base.gl-text-center
     %strong= s_('Integrations|Browser limitations')
     - firefox_link_url = 'https://www.mozilla.org/en-US/firefox/'
     - firefox_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: firefox_link_url }