Fix / Restrict text length to avoid scrolling issue

[MelissaDTH]

Description

Issue: The video detail page starts halfway down the viewport when a media item has a very long description, because the "Start Watching" button receives focus.

Solution

By limiting the number of lines in the video description, we not only ensure that the page does not start halfway down, but it also aligns better with the designs and overall visuals.

• I've introduced a reusable TruncatedText component and modified CollapsibleText to remove the unnecessary maxHeight prop. Added a maxHeight constant with the original value for readability in calculations.
• Verified the fix with video descriptions of various lengths and tested with 175% zoom on smaller screens to ensure proper line limit and prevent page scrolling.

Steps completed:

According to our definition of done, I have completed the following steps:

• [x] Acceptance criteria met
• [x] Unit tests added
• [ ] Docs updated (including config and env variables)
• [ ] Translations added
• [x] UX tested
• [x] Browsers / platforms tested
• [x] Rebased & ready to merge without conflicts
• [x] Reviewed own code

Example

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit b7831b0):

https://ottwebapp--pr538-fix-scroll-detail-pa-z71kkux2.web.app

_{(expires Sat, 29 Jun 2024 16:19:55 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c198f8a3a199ba8747819f7f1e45cf602b777529}

[ChristiaanScheermeijer]

Thanks for the updates @MelissaDTH! There is still one conceptual thing I didn't mention, and I'm curious if you and others agree.

I think we should simplify the TruncatedText component like the CollapsibleText component. Both have separate functions, but now the TruncatedText component is also responsible for choosing to truncate or collapse the text.

So I think we should:

1) Update the TruncatedText component to just truncate the given text 2) Either conditionally render either in the updated screens/components OR create a specific component that implements this logic

The advantage is that both components can be used agnostic and testing these components becomes more simple.

What do you think?

[langemike]

• Update the TruncatedText component to just truncate the given text

I agree. I would go for option 1!

[MelissaDTH]

I think we should simplify the TruncatedText component like the CollapsibleText component. Both have separate functions, but now the TruncatedText component is also responsible for choosing to truncate or collapse the text. ...

Thanks for the feedback, @ChristiaanScheermeijer. I spoke with Mike about this issue and during that conversation, I advocated for the idea that since TruncatedText doesn't have much functionality, it would simplify matters to assign it the responsibility of determining how to render the text based on whether it's being viewed on mobile or not. However, now that both of you suggest going in this direction, I've implemented it!