[FIX] website_sale: to display alternative products

The image of an alternative product must be centered and the name
of the product must be cut with "..." if it's too long for the block
to keep the symetry for each block.

opw:647612

addons/website_sale/static/src/css/website_sale.css

@@ -29,6 +29,10 @@
 }
 
 /* ---- Default Styles ---- */
+
+.o_alternative_product {
+  margin: auto;
+}
 .oe_product {
   position: relative;
 }

addons/website_sale/views/templates.xml

@@ -489,10 +489,11 @@
           <t t-foreach="product.alternative_product_ids" t-as="product">
               <div class='col-md-2 thumbnail' style='width: 170px; height:130px; float:left; display:inline; margin-right: 10px;'>
                   <div class='mt16 text-center'>
-                      <span t-field="product.image_small" t-field-options='{"widget": "image", "class": "img-rounded shadow" }'/>
+                      <span t-field="product.image_small" t-field-options='{"widget": "image", "class": "img-rounded shadow o_alternative_product" }'/>
                       <h5>
                           <a t-attf-href="/shop/product/#{ slug(product) }" style="display: block">
-                              <span t-field='product.name' style="display: block"/>
+                              <span t-att-title='product.name' t-field='product.name' style="display: block; max-width:100%;
+                              overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"/>
                           </a>
                       </h5>
                   </div>