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,7 +89,8 @@ export default {
 </script>
 
 <template>
-  <div ref="presentationViewport" class="d-flex flex-column h-100 mh-100 position-relative">
+  <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"
@@ -100,4 +101,5 @@ export default {
         @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,18 +2,25 @@
 
 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"
 >
+  <div
+    class="h-100 w-100 d-flex align-items-center position-relative"
+  >
     <design-image-stub
       image="test.jpg"
       name="test"
@@ -24,5 +31,6 @@ exports[`Design management design presentation component renders image and overl
       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>