Merge branch 'andr3-design-management-avoid-distorted-images' into 'master'

Make thumbnails in design lists not distorted

See merge request gitlab-org/gitlab-ee!14670

ee/app/assets/javascripts/design_management/components/list/index.vue

@@ -16,7 +16,7 @@ export default {
 
 <template>
   <ol class="list-unstyled row">
-    <li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-4">
+    <li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-4 mb-3">
       <design
         :id="design.id"
         :comments-count="design.commentsCount"

ee/app/assets/javascripts/design_management/components/list/item.vue

@@ -45,8 +45,8 @@ export default {
     :to="{ name: 'design', params: { id: name } }"
     class="card cursor-pointer text-plain js-design-list-item design-list-item"
   >
-    <div class="card-body p-0">
-      <img :src="image" :alt="name" class="block ml-auto mr-auto mw-100 design-img" height="230" />
+    <div class="card-body p-0 d-flex align-items-center overflow-hidden">
+      <img :src="image" :alt="name" class="block ml-auto mr-auto mw-100 mh-100 design-img" />
     </div>
     <div class="card-footer d-flex w-100">
       <div class="d-flex flex-column str-truncated-100">

ee/app/assets/stylesheets/pages/design_management.scss

@@ -10,3 +10,9 @@
     line-height: 1;
   }
 }
+
+.design-list-item {
+  .card-body {
+    height: 230px;
+  }
+}

ee/changelogs/unreleased/andr3-design-management-avoid-distorted-images.yml

+---
+title: Avoid Design Management thumbnails from being distorted/stretched
+merge_request: 14670
+author:
+type: fixed

ee/spec/frontend/design_management/components/list/__snapshots__/index_spec.js.snap

@@ -5,7 +5,7 @@ exports[`Design management list component renders list 1`] = `
   class="list-unstyled row"
 >
   <li
-    class="col-md-6 col-lg-4"
+    class="col-md-6 col-lg-4 mb-3"
   >
     <design-stub
       commentscount="2"
@@ -16,7 +16,7 @@ exports[`Design management list component renders list 1`] = `
     />
   </li>
   <li
-    class="col-md-6 col-lg-4"
+    class="col-md-6 col-lg-4 mb-3"
   >
     <design-stub
       commentscount="2"

ee/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -6,12 +6,11 @@ exports[`Design management list item component hides comment count 1`] = `
   to="[object Object]"
 >
   <div
-    class="card-body p-0"
+    class="card-body p-0 d-flex align-items-center overflow-hidden"
   >
     <img
       alt="test"
-      class="block ml-auto mr-auto mw-100 design-img"
-      height="230"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
       src="http://via.placeholder.com/300"
     />
   </div>
@@ -52,12 +51,11 @@ exports[`Design management list item component renders item with multiple commen
   to="[object Object]"
 >
   <div
-    class="card-body p-0"
+    class="card-body p-0 d-flex align-items-center overflow-hidden"
   >
     <img
       alt="test"
-      class="block ml-auto mr-auto mw-100 design-img"
-      height="230"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
       src="http://via.placeholder.com/300"
     />
   </div>
@@ -116,12 +114,11 @@ exports[`Design management list item component renders item with single comment
   to="[object Object]"
 >
   <div
-    class="card-body p-0"
+    class="card-body p-0 d-flex align-items-center overflow-hidden"
   >
     <img
       alt="test"
-      class="block ml-auto mr-auto mw-100 design-img"
-      height="230"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
       src="http://via.placeholder.com/300"
     />
   </div>