Overlapping text on "Import from other channels" dropdown

[marcellamaki]

Observed behavior

Reported by Lauren in the 2023-21-06 bug hunt

Expected behavior

Text should either be truncated or properly spaced so that it does not overlap

User-facing consequences

Readability issues

Usage Details

hotfixes bug hunt, 2023-21-06

[Jaspreet-singh-1032]

Hey @marcellamaki @vkWeb, I was working on this issue. I have truncated the text like this but I think this can cause confusion if two channels names are similar in starting. Let me know if it looks fine or needs to show full names here.

[MisRob]

Hi @Jaspreet-singh-1032, thank you for picking another issue and asking clarification questions, we appreciate it.

I see two things here.

(1) The decision if we want to use text truncation or allow titles to take more lines. I think it'd be best to hear from @jtamiace or @tomiwaoLE in this regard. However, because right now titles are not readable, it's a pretty high priority and I think it'd be valuable to have it fixed in any of the suggested ways rather sooner than later and we can improve even more later if needed.

This takes me to (2), if you'd like to continue using text truncation to solve this, we need to communicate truncation to users by using the ellipsis (...) rather than cutting a title off without any indication of truncation happening. We already have a component in our codebase for truncating text which is used in similar situations, so it'd be best to use it. The component is TextTruncatorCss and you can search the codebase to see how it's used. Note that you might also come across another similar component, TextTruncator. Please don't use that one as we want to remove it completely in favor of TextTruncatorCss (learningequality/kolibri#8532).

[MisRob]

@Jaspreet-singh-1032 I'm assigning both of us but won't work on it myself, it's just for me to keep track of what issues are taken or may need some support. Let us know how it's going any time.

[MisRob]

@Jaspreet-singh-1032 I made a mistake, apologies - didn't notice that this is Studio, not Kolibri! So unfortunately we don't have TextTruncatorCss here so you'd need to implement text truncation without that if you go in that direction. You can still refer to Kolibri's TextTruncatorCss for reference if that'd be helpful.

[Jaspreet-singh-1032]

I got it, thanks!

[pcenov]

I've filed the following issue for some problems I noticed with the current implementation: #4286