Add latest changes from gitlab-org/gitlab@13-4-stable-ee

2 files changed, 36 insertions, 34 deletions

diff --git a/app/assets/javascripts/vue_shared/components/resizable_chart/constants.js b/app/assets/javascripts/vue_shared/components/resizable_chart/constants.js
index edc5ffb7b77..68d86777995 100644
--- a/app/assets/javascripts/vue_shared/components/resizable_chart/constants.js
+++ b/app/assets/javascripts/vue_shared/components/resizable_chart/constants.js
@@ -1,6 +1,6 @@
 export const DEFAULT_RX = 0.4;
-export const DEFAULT_BAR_WIDTH = 6;
-export const DEFAULT_LABEL_WIDTH = 4;
-export const DEFAULT_LABEL_HEIGHT = 5;
+export const DEFAULT_BAR_WIDTH = 4;
+export const DEFAULT_LABEL_WIDTH = 3;
+export const DEFAULT_LABEL_HEIGHT = 3;
 export const BAR_HEIGHTS = [5, 7, 9, 14, 21, 35, 50, 80];
 export const GRID_YS = [30, 60, 90];
diff --git a/app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue b/app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue
index 306fa61780f..a9f35a73db0 100644
--- a/app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue
+++ b/app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue
@@ -61,35 +61,37 @@ export default {
 };
 </script>
 <template>
-  <gl-skeleton-loader :unique-key="uniqueKey">
-    <rect
-      v-for="(y, index) in $options.GRID_YS"
-      :key="`grid-${index}`"
-      data-testid="skeleton-chart-grid"
-      x="0"
-      :y="`${y}%`"
-      width="100%"
-      height="1px"
-    />
-    <rect
-      v-for="(height, index) in $options.BAR_HEIGHTS"
-      :key="`bar-${index}`"
-      data-testid="skeleton-chart-bar"
-      :x="`${getBarXPosition(index)}%`"
-      :y="`${90 - height}%`"
-      :width="`${barWidth}%`"
-      :height="`${height}%`"
-      :rx="`${rx}%`"
-    />
-    <rect
-      v-for="(height, index) in $options.BAR_HEIGHTS"
-      :key="`label-${index}`"
-      data-testid="skeleton-chart-label"
-      :x="`${labelCentering + getBarXPosition(index)}%`"
-      :y="`${100 - labelHeight}%`"
-      :width="`${labelWidth}%`"
-      :height="`${labelHeight}%`"
-      :rx="`${rx}%`"
-    />
-  </gl-skeleton-loader>
+  <div class="gl-px-8">
+    <gl-skeleton-loader :unique-key="uniqueKey" class="gl-p-8">
+      <rect
+        v-for="(y, index) in $options.GRID_YS"
+        :key="`grid-${index}`"
+        data-testid="skeleton-chart-grid"
+        x="0"
+        :y="`${y}%`"
+        width="100%"
+        height="1px"
+      />
+      <rect
+        v-for="(height, index) in $options.BAR_HEIGHTS"
+        :key="`bar-${index}`"
+        data-testid="skeleton-chart-bar"
+        :x="`${getBarXPosition(index)}%`"
+        :y="`${90 - height}%`"
+        :width="`${barWidth}%`"
+        :height="`${height}%`"
+        :rx="`${rx}%`"
+      />
+      <rect
+        v-for="(height, index) in $options.BAR_HEIGHTS"
+        :key="`label-${index}`"
+        data-testid="skeleton-chart-label"
+        :x="`${labelCentering + getBarXPosition(index)}%`"
+        :y="`${100 - labelHeight}%`"
+        :width="`${labelWidth}%`"
+        :height="`${labelHeight}%`"
+        :rx="`${rx}%`"
+      />
+    </gl-skeleton-loader>
+  </div>
 </template>