Feature: Refactor string trimming approach in the app

[nickytonline]

Type of feature

🧑‍💻 Refactor

Current behavior

Currently we truncate strings and add a ... at the end of them, e.g.

app/components/ListHeader/list-header.tsx

Lines 46 to 48 in 8adb34e

	<Title level={1} className="!text-2xl font-semibold tracking-tight text-slate-900">
	{(name && truncateString(name, 30)) || "Insights"}
	</Title>

Visually this works, but the user can never know what the full text is because we trim it programmatically.

Suggested solution

Avoid text transforms like this in JavaScript and opt for CSS instead, e.g.

- <h2> 
-   {(name && truncateString(name, 30)) || "Insights"} 
+ <h2 title={name} className=""w-48 whitespace-nowrap overflow-hidden overflow-ellipsis> 
+   { name || "Insights"} 
 </h2>

This example uses w-48 but we'd use whatever makes sense for the width we'd want for the scenario that requires trimming.

The title attribute allows the user to hover over the element to see a small browser popup with the full text.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[nickytonline]

This is not ready to be worked on yet, as I don't know the sizing we need for where this is currently used, cc: @OgDev-01, @isabensusan. I'm going to assign it to you for now Sunday even if you don't end up working on it.

We can have several PRs for this so we do it bit by bit. It appears to be used in 6 pages/components atm.

Also, once this is complete, we can remove the associated coed and unit tests for truncateString:

• https://github.com/open-sauced/app/blob/8adb34e205951e9792f9cc7b869a0704016945ff/tests/lib/utils/truncate.test.ts
• https://github.com/open-sauced/app/blob/8adb34e205951e9792f9cc7b869a0704016945ff/lib/utils/truncate-string.ts

[nickytonline]

This can probably be a good first issue once we've decided on sizing for the areas where the text is currently truncated.