fix: Product name truncated #7502

[TCatinaud]

What

The product name is truncated due to a fixed height defined in the product link. This allows you to have a list of products with a unified height.

Several solutions are possible (such as using grids), I preferred:

• keep a fixed height by adapting it to avoid seeing part of the text truncated.
• use the -webkit-line-clamp property to display 3 points if the text is longer. The latter is still in WD but supported by 97% of browsers and offers gracefull degradation if not supported.

The full product name remains accessible by screen readers and when hovering over the map (via the title attribute of the link).
I also added the line-clamp when JS is activated with the alternative in the link title.

Screenshot

• JS disabled, before fix:
  
• JS disabled, after fix:
  
• JS disabled, show title:
  
• JS enabled, before fix:
  
• JS enabled, after fix:
  
• JS enabled, show title:
  

Related issue(s) and discussion

• Fixes NEW DESIGN - Product name is truncated (JS disabled only ?) #7502

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (e8cb4f4) 49.28% compared to head (5edcbc6) 49.28%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #9618   +/-   ##
=======================================
  Coverage   49.28%   49.28%           
=======================================
  Files          66       66           
  Lines       20546    20546           
  Branches     4946     4946           
=======================================
  Hits        10126    10126           
  Misses       9132     9132           
  Partials     1288     1288           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[hangy]

This seems to be related to the (old?) standard display: box, but box-orient is apparently deprecated according to https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient#browser_compatibility? Or is that related to the W3C draft?

[alexgarel]

FYI, on firefox 121.0 on ubuntu 23.10:

• works well without js for me

• with js, the 4th line is already below the other tile:
  

[stephanegigandet]

• with js, the 4th line is already below the other tile:

@alexgarel in fact it depends on the screen width, there is a .v-space-tiny class that gets from 3.5 pixels to 10.5 pixels as the screen grows, but it has no sense here as we put in more columns when the screen grows.. I'll try replacing it with a fixed size instead.

[stephanegigandet]

I removed the v-space-tiny class: it made the padding-top of the text go from 3.5 pixels to 10.5 pixels as the screen grew, resulting on the 4th line being not shown completely when the screen was large.

The 4 lines now always fit:

[stephanegigandet]

Thank you so much for this change @TCatinaud , it's perfect. :)

[sonarqubecloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud