Introduce KTextTruncator component for text truncation

[MisRob]

🌱 Are you new to the codebase? Welcome and please see the contributing guidelines.

Expected behavior

Whenever relevant, Studio should use KTextTruncator component from the Kolibri Design System (KDS) to achieve text truncation.

One example is text truncation in the ClipboardChip.vue but there will likely be more places.

Current Behavior

Studio currently uses its own implementation for text truncation.

Impact

This is part of migrating Studio to KDS. KTextTruncator provides a robust and well-tested solution for text truncation and will eliminate the need to re-implement truncation.

Trade-Offs

Not aware of any.

Guidance

• To locate the truncation that needs to be replaced, search for any CSS properties and values related to truncating, such as ellipsis.
• For more information on using KTextTruncator, refer to its documentation. If working with the design system for the first time, study how other K components are used in Studio.
• Note that depending on the context (e.g. current usage of the Vuetify library), in some places it may make more sense to not use KTextTruncator. If that's the case, please mention reasons for not using it in your pull request.

Acceptance Criteria

• The codebase has been thoroughly searched for all occurrences of truncation.
• The custom implementation of truncation has been replaced with KTextTruncator wherever relevant.
• The places where KTextTruncator has been introduced have been visually reviewed and do not have any regressions.
• A list of places where KTextTruncator is better not to be used has been provided in the pull request.

[lokesh-sagi125]

hey @MisRob can you assign this to me?

[AlexVelezLl]

Hey @lokesh-sagi125! Thanks for your interest in contributing to this issue 👐. I just assigned it to you. Please let us know if you have any questions (:.