Category product grids become misaligned with long product names/SKUs

[plundaahl-ep]

Step 1: Are you in the right place?

Yes (this is an issue with code in this repository).

Step 2: Describe your environment

• Device: 15" Macbook Pro, 2018
• OS version: 10.14.6
• Storefront pulled version: v2.0.0 (technically it's commit d6af986, but the issue is present on v2.0.0 as well)
• Node version: v10.16.0

Step 3: Describe the problem:

When a category page displays products with long names or SKUs, the names/skus will cause the product cards to expand horizontally. This causes the grid of product cards to become misaligned. See attached screenshot:

Steps to reproduce:

1. Point the EPCC Reference Store at an Elastic Path Commerce Cloud store that includes products with long names (the screenshot above uses client ID ZwxS3oqSKCPtdBrcUWlSRGytbjBh2mZdlxzaNaSeao)
2. Navigate to a category containing long product names (e.g., Apparel > Kids)

Observed Results:

• The grid of product cards is misaligned - individual columns do not line up cleanly
• Product cards with long names or SKUs grow horizontally

Expected Results:

• The grid of product cards remains aligned
• Long titles and SKUs do one of the following:
  • Word-wrap, in which case the price, availability, and compare elements should also align vertically with their neighbors in the same row
  • Have trailing characters cut off via overflow (probably with ellipses indicating the overflow)

Relevant Code:

The code that governs this behavior is contained in src/ProductThumbnail.scss