Apply text attribute component to overview page - using text expander

[ulferts]

Acceptance criteria

• Apply truncation to custom field attributes displayed in project overview page
  • On that page, the height is supposed to be up to three times the line height. Required adaptations in the component.
    • Still only display the first p element.
    • To make for a nicer behaviour, the text expander item is placed over the text. This allows the text in the lines before to go till the end of the line which reads more nicely. But this required some technical quirks since the color chosen for the text expander has an alpha value. So without any tricks, the text would shine through. To prevent this, another DOM element is placed below the text expander. That element needs to have the background color of the text. In most cases this is the color of #content. This part is rather hacky but works.
• Use HiddenTextExpander instead of "Expand" link
  • Using the text expander, especially since it is placed over the text, leads to the text being cut off abruptly. No way around this could be identified.
• Remove braces from "Preview not available"
• The code used to have some reference to qa_selector when test_selector should have been used.

On the overview page, this looks e.g. like this:

On the list page, this looks e.g. like this:

---

https://community.openproject.org/wp/53373

[dombesz]

LGMT, thanks Jens! 👍

I found 2 bugs and fixed them:

1. The "Preview not available" text wasn't displayed on the projects table, when the content of the custom field was just a table macro.
2. The "Preview not available" text overflowing the ellipsis on the projects table, the calculation needed to take the hider element's width into account.