kolibri
kolibri copied to clipboard
learningequality
Long name of the lesson overlaps the other items in the "lessons" block on the *Class home* page
Environment; Raspberry Pi 3B+ OS: Kolibri 0.14.3 tested on Mac mini (Mid 2011) Browser: Google Chrome latest
Severity; minor
Preconditions; user is logged in as a coach, Class home page is opened;
Steps to reproduce;
- Proceed to the Plan>Lessons page
- Create a new lesson with 50 characters in the title
- Come back to the Class home page
- Pay attention to displaying the created lesson block
Actual result: Long name of the lesson overlaps the other items in the "lessons" block on the Class home page Expected result: Long name of the lesson doesn't overlap the other items in the "lessons" block on the Class home page Attachment: http://e.pc.cd/PFbotalK
Just noting that "long names" here means "long unbroken string" like the example in the video. Names with many individual words like "a b c d e f..." won't display in a single long line.
What makes fixing this issue difficult is that there is no linguistically sound way break up or hyphenate words in general to avoid this layout issue.
This should be resolved by wrapping the text in our CSSTextTruncator component.
Hi, I have looked for the bug, and to solve this, I was thinking of implementing one of the below methods, either to hide the complete name and show ... when the text overflows:
Or to break the word:
Also, to make any of these changes, should I add a new class in the Lessons component and the functionality in the design system repository or add the CSS change in the existing class?
Hi @nikkuAg, let's go with the text truncation, since we can't really say if it will be two or three or more lines. Please use the existing TextTruncatorCss component.