feat: implement content truncation for Action Plan cards (M2-7861)

[qiushihe]

📝 Description

🔗 Jira Ticket M2-7861

This PR updates the Action Plan cards rendering code to implement a binary-searched based truncation algorithm. The algorithm will not only truncate at phrasal field level, but also at phrasal field content level, to ensure each card contains the maximum amount of content. Overflowing contents at the end of a card, and corresponding continuation content at the beginning of the following card, are connected by a set of ellipses.

For a walkthrough of implementation detail, please see this loom recording: https://www.loom.com/share/0f3fd7416f814e769ca1318e2ac13a28

📸 Screenshots

Text Truncation Start

---

Text Truncation Both Ends

---

Text Truncation End

---

**List Truncation Start/End **

---

List Truncation Both Ends

---

List Truncation when Rendered as Sentence

🪤 Peer Testing

Note: By default, the maximum page height is 2504px, which is very tall. So for testing, it's easier to run the code locally, then edit the usePageMaxHeight function of src/entities/activity/ui/items/ActionPlan/hooks.tsx, and make it return a smaller number (i.e. 512).

1. Create an applet with an activity with a number of items
2. Create a phrasal template item with abundance of content
3. Go through the activity and reach the phrasal template step
4. The Action Plan cards should be truncated

✏️ Notes

Although the AC of the ticket only specified truncation of text content, the implementation actually also truncate list items. The reason being: if a list is too long, it should just be truncated anyway. Otherwise, we'll have to deal with all sort of complication around list content overflowing/cut-off, etc. If we REALLY don't want to truncate list items, we can still set a flag in the code to turn that off.

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-541.d15zn9do8xbzga.amplifyapp.com

[farmerpaul]

Hey @qiushihe, amazing algorithmic work!! Your focus on this to take care of so many truncation edge cases is greatly appreciated. 🙏🏻❤️🙏🏻 I had some very minor comments but the code looks great otherwise.

I'm still encountering that same discrepancy in pagination between desktop and mobile browsers as I identified in your previous PR. With max page height set to 512, I'm getting quite a significant difference in # of pages generated:

Web (Chromium)	Mobile (Safari)

[qiushihe]

@farmerpaul the issue with the mobile browser vs. desktop browser truncation height difference is due to font-size and line-height calculation. Those 2 values are not set directly, but are calculated using useXScaledDimension and useYScaledDimension respectively. I can try tweaking the formula a bit, but at the end of the day, mobile browser is essentially just a responsive view, with difference page width than the desktop browser (which can also have whatever page width people end up with). So it unlikely that the 2 can be made to be always completely identical.

I also addressed those other comments, so if you can take another look that would be great. I'll just be tweaking the font-size/line-height stuff in the background for a bit.

[farmerpaul]

Hey @qiushihe, I recorded a Loom with a simple proposed solution to the aspect ratio issue, check it out: https://www.loom.com/share/898fea7503ef4f5696985e15eebf3fe4

See what you think, hopefully that will be adequate. I'll pre-approve regardless. 🙂

Edit: In my loom I demoed the solution with useXScaledDimension, but I supposed useYScaledDimension is actually the right one? Doesn't seem to make a whole lot of difference which one you use.

[qiushihe]

That's actually really cool! I never thought about also scaling the max height value. And it seems easy enough, so I'll make the change. Thanks @farmerpaul!