Read more link in mobile view of project overview is always visible

Summary

Found in https://gitlab.com/gitlab-org/gitlab-ce/issues/51243, the "Read more" link that should only be visible for long descriptions on mobile is always visible, even if the description isn't truncated to one line.

Steps to reproduce

  • Visit a project with a short description, e.g., https://gitlab.com/dennis/reviewer-roulette
  • Resize the browser to be a mobile-sized viewport
  • Observe that the "Read more" link is visible even though the description comfortably fits on one line.

Example Project

https://gitlab.com/dennis/reviewer-roulette

What is the current bug behavior?

"Read more" link for expanding project description is always visible.

What is the expected correct behavior?

"Read more" link for expanding project description should only be visible if the project description needs to be truncated, i.e., is longer than one line.

Relevant logs and/or screenshots

image

Possible fixes

  • Limit project description by a number of characters and only display the "Read more" link afterwards
  • Calculate the project descriptions line-height and height to determine if it exceed more than one line, then display link