Skip to content
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
@nickytonline

Description

@nickytonline

Type of feature

πŸ§‘β€πŸ’» Refactor

Current behavior

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

<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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions