This repository was archived by the owner on Mar 12, 2025. It is now read-only.
This repository was archived by the owner on Mar 12, 2025. It is now read-only.
Feature: Refactor string trimming approach in the appΒ #1763
Open
Description
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
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