chore: fixes gutter space between settings page content and sidebar (#2505)

* chore: fixes no gutter space between the settings page content and right content.

* Review fixes

app/javascript/dashboard/assets/scss/_foundation-custom.scss

@@ -45,3 +45,7 @@ code {
 .cursor-pointer {
   cursor: pointer;
 }
+// remove when grid gutters are fixed
+.columns.with-right-space {
+  padding-right: var(--space-normal);
+}

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -11,7 +11,7 @@
 
     <!-- List Agents -->
     <div class="row">
-      <div class="small-8 columns">
+      <div class="small-8 columns with-right-space ">
         <woot-loading-state
           v-if="uiFlags.isFetching"
           :message="$t('AGENT_MGMT.LOADING')"

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -11,7 +11,7 @@
 
     <!-- List Canned Response -->
     <div class="row">
-      <div class="small-8 columns">
+      <div class="small-8 columns with-right-space ">
         <p
           v-if="!uiFlags.fetchingList && !records.length"
           class="no-items-error-message"

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -2,7 +2,7 @@
   <div class="column content-box">
     <!-- List Canned Response -->
     <div class="row">
-      <div class="small-8 columns">
+      <div class="small-8 columns with-right-space ">
         <p v-if="!inboxesList.length" class="no-items-error-message">
           {{ $t('INBOX_MGMT.LIST.404') }}
           <router-link

app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="row ">
-    <div class="small-8 columns">
+    <div class="small-8 columns with-right-space ">
       <table v-if="hasConnectedHooks" class="woot-table">
         <thead>
           <th v-for="hookHeader in hookHeaders" :key="hookHeader">

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue

@@ -10,7 +10,7 @@
     </woot-button>
 
     <div class="row">
-      <div class="small-8 columns">
+      <div class="small-8 columns with-right-space ">
         <p
           v-if="!uiFlags.fetchingList && !records.length"
           class="no-items-error-message"

app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue

@@ -9,7 +9,7 @@
       {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
     </woot-button>
     <div class="row">
-      <div class="small-8 columns">
+      <div class="small-8 columns with-right-space ">
         <p
           v-if="!uiFlags.isFetching && !records.length"
           class="no-items-error-message"

app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="column content-box">
     <div class="row">
-      <div class="small-8 columns">
+      <div class="small-8 columns with-right-space ">
         <p v-if="!teamsList.length" class="no-items-error-message">
           {{ $t('TEAMS_SETTINGS.LIST.404') }}
           <router-link