kolibri icon indicating copy to clipboard operation
kolibri copied to clipboard
verified publisher icon learningequality

Controls overlapping content in folder resources panel

Open dylanmccall opened this issue 3 years ago • 3 comments

Observed behavior

In the "folder resources" panel for some resources, both the close button and the arrow icon overlap with text:

Screenshot 2022-04-22 at 15-53-19 Watch Me - TED-Ed Lessons - Kolibri

User-facing consequences

This does not block interaction, but it makes text difficult to read and it looks ugly.

Steps to reproduce

This occurs using Ted Ed content at https://kolibri-demo.learningequality.org/en/learn/#/topics/c/5900e6eab432596d88ab8cf455a77995?last=TOPICS_TOPIC_SEARCH&topicId=68ad96dcf36f54db9367e76ee7afc015.

Context

The screenshot was created using Firefox with a 1366×768 resolution.

The same issue was also seen using the Kolibri desktop app for GNOME: https://flathub.org/apps/details/org.learningequality.Kolibri.

Kolibri version: 0.15.1.

dylanmccall avatar Apr 22 '22 22:04 dylanmccall

Could you specify the Kolibri version? I assume 0.15.1, but want to double check.

rtibbles avatar Apr 25 '22 15:04 rtibbles

I tested this on develop and 0.15 and see the issue in both. I figure a fix for this should probably both:

  • Address the text width to avoid overlapping with the icons
  • Use the TextTruncatorCSS component on the content title there to avoid overflow of longer titles

nucleogenesis avatar Apr 25 '22 15:04 nucleogenesis

Yep, looks like you got it, but just to confirm this was with Kolibri 0.15.1.

dylanmccall avatar Apr 25 '22 17:04 dylanmccall

Fixed in #9699.

rtibbles avatar Sep 14 '22 15:09 rtibbles