Make thumbnails in design lists not distorted

This change basically makes use of flexbox features
to have the images be vertically centered instead of
stretched vertically, which was distorting images'
original ratio.

Also updates the jest snapshots with the new markup.

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>