Add latest changes from gitlab-org/gitlab@master

2 files changed, 19 insertions, 7 deletions

diff --git a/app/assets/javascripts/design_management/components/image.vue b/app/assets/javascripts/design_management/components/image.vue
index 5354c7756f5..fd691d1f04e 100644
--- a/app/assets/javascripts/design_management/components/image.vue
+++ b/app/assets/javascripts/design_management/components/image.vue
@@ -72,12 +72,19 @@ export default {
     },
     setBaseImageSize() {
       const { contentImg } = this.$refs;
-      if (!contentImg || contentImg.offsetHeight === 0 || contentImg.offsetWidth === 0) return;
+      if (!contentImg) return;
+      if (contentImg.offsetHeight === 0 || contentImg.offsetWidth === 0) {
+        this.baseImageSize = {
+          height: contentImg.naturalHeight,
+          width: contentImg.naturalWidth,
+        };
+      } else {
+        this.baseImageSize = {
+          height: contentImg.offsetHeight,
+          width: contentImg.offsetWidth,
+        };
+      }
 
-      this.baseImageSize = {
-        height: contentImg.offsetHeight,
-        width: contentImg.offsetWidth,
-      };
       this.onResize({ width: this.baseImageSize.width, height: this.baseImageSize.height });
     },
     setImageNaturalScale() {
@@ -96,6 +103,11 @@ export default {
 
       const { height, width } = this.baseImageSize;
 
+      this.imageStyle = {
+        width: `${width}px`,
+        height: `${height}px`,
+      };
+
       this.$parent.$emit(
         'setMaxScale',
         Math.round(((height + width) / (naturalHeight + naturalWidth)) * 100) / 100,
diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue
index 1e36aa686a4..d6405549452 100644
--- a/app/assets/javascripts/design_management/components/list/item.vue
+++ b/app/assets/javascripts/design_management/components/list/item.vue
@@ -144,7 +144,7 @@ export default {
           />
         </span>
       </div>
-      <gl-intersection-observer @appear="onAppear">
+      <gl-intersection-observer class="gl-flex-grow-1" @appear="onAppear">
         <gl-loading-icon v-if="showLoadingSpinner" size="lg" />
         <gl-icon
           v-else-if="showImageErrorIcon"
@@ -156,7 +156,7 @@ export default {
           v-show="showImage"
           :src="imageLink"
           :alt="filename"
-          class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img"
+          class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full gl-w-auto design-img"
           data-qa-selector="design_image"
           :data-qa-filename="filename"
           :data-testid="`design-img-${id}`"