Merge branch 'scrollable-design-view' into 'master'

Scrollable design view (#13217 part 1)

See merge request gitlab-org/gitlab!22942

ee/app/assets/javascripts/design_management/components/design_presentation.vue

@@ -89,15 +89,17 @@ export default {
 </script>
 
 <template>
-  <div ref="presentationViewport" class="d-flex flex-column h-100 mh-100 position-relative">
-    <design-image v-if="image" :image="image" :name="imageName" @resize="onImageResize" />
-    <design-overlay
-      v-if="overlayDimensions && overlayPosition"
-      :dimensions="overlayDimensions"
-      :position="overlayPosition"
-      :notes="discussionStartingNotes"
-      :current-comment-form="currentCommentForm"
-      @openCommentForm="openCommentForm"
-    />
+  <div ref="presentationViewport" class="h-100 w-100 p-3 overflow-auto">
+    <div class="h-100 w-100 d-flex align-items-center position-relative">
+      <design-image v-if="image" :image="image" :name="imageName" @resize="onImageResize" />
+      <design-overlay
+        v-if="overlayDimensions && overlayPosition"
+        :dimensions="overlayDimensions"
+        :position="overlayPosition"
+        :notes="discussionStartingNotes"
+        :current-comment-form="currentCommentForm"
+        @openCommentForm="openCommentForm"
+      />
+    </div>
   </div>
 </template>

ee/app/assets/javascripts/design_management/components/image.vue

@@ -52,13 +52,7 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image">
-    <img
-      ref="contentImg"
-      :src="image"
-      :alt="name"
-      class="ml-auto mr-auto img-fluid mh-100 design-image"
-      @load="onImgLoad"
-    />
+  <div class="m-auto h-100 w-100 d-flex-center js-design-image">
+    <img ref="contentImg" :src="image" :alt="name" class="img-fluid mh-100" @load="onImgLoad" />
   </div>
 </template>

ee/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap

@@ -2,27 +2,35 @@
 
 exports[`Design management design presentation component renders empty state when no image provided 1`] = `
 <div
-  class="d-flex flex-column h-100 mh-100 position-relative"
+  class="h-100 w-100 p-3 overflow-auto"
 >
-  <!---->
-   
-  <!---->
+  <div
+    class="h-100 w-100 d-flex align-items-center position-relative"
+  >
+    <!---->
+     
+    <!---->
+  </div>
 </div>
 `;
 
 exports[`Design management design presentation component renders image and overlay when image provided 1`] = `
 <div
-  class="d-flex flex-column h-100 mh-100 position-relative"
+  class="h-100 w-100 p-3 overflow-auto"
 >
-  <design-image-stub
-    image="test.jpg"
-    name="test"
-  />
-   
-  <design-overlay-stub
-    dimensions="[object Object]"
-    notes=""
-    position="[object Object]"
-  />
+  <div
+    class="h-100 w-100 d-flex align-items-center position-relative"
+  >
+    <design-image-stub
+      image="test.jpg"
+      name="test"
+    />
+     
+    <design-overlay-stub
+      dimensions="[object Object]"
+      notes=""
+      position="[object Object]"
+    />
+  </div>
 </div>
 `;

ee/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap

@@ -2,11 +2,11 @@
 
 exports[`Design management large image component renders image 1`] = `
 <div
-  class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image"
+  class="m-auto h-100 w-100 d-flex-center js-design-image"
 >
   <img
     alt="test"
-    class="ml-auto mr-auto img-fluid mh-100 design-image"
+    class="img-fluid mh-100"
     src="test.jpg"
   />
 </div>
@@ -14,12 +14,12 @@ exports[`Design management large image component renders image 1`] = `
 
 exports[`Design management large image component renders loading state 1`] = `
 <div
-  class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image"
+  class="m-auto h-100 w-100 d-flex-center js-design-image"
   isloading="true"
 >
   <img
     alt=""
-    class="ml-auto mr-auto img-fluid mh-100 design-image"
+    class="img-fluid mh-100"
     src=""
   />
 </div>