Repository navigation
Overlapping text on "Import from other channels" dropdown #4166
Description
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
Activity
Jaspreet-singh-1032 commentedon Jul 3, 2023
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 commentedon Jul 4, 2023
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 ofTextTruncatorCss(learningequality/kolibri#8532).MisRob commentedon Jul 4, 2023
@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 commentedon Jul 4, 2023
@Jaspreet-singh-1032 I made a mistake, apologies - didn't notice that this is Studio, not Kolibri! So unfortunately we don't have
TextTruncatorCsshere so you'd need to implement text truncation without that if you go in that direction. You can still refer to Kolibri'sTextTruncatorCssfor reference if that'd be helpful.Jaspreet-singh-1032 commentedon Jul 4, 2023
I got it, thanks!
pcenov commentedon Sep 18, 2023
I've filed the following issue for some problems I noticed with the current implementation: #4286