Missing visual separation between the last sub-folder of a topic and resources that are direct children of the topic

[MisRob]

Observed behavior

This is the structure of the HTML5 topic in the Kolibri QA Channel. Notice "Slides Slides Slides!" and "Document with links" resources listed below all sub-folders of the topic.

These two resources are direct children of the HTML5 topic. However, in the library, they seem to belong to the SCORM sub-folder due to missing visual separation:

Expected behavior

Resources that live next to sub-folders of a topic are visually separated from sub-folders

User-facing consequences

Resources seem to belong to a folder that they don't belong to

Steps to reproduce

1. Import the Kolibri QA Channel by using nakav-mafak token
2. Navigate to "Learn" -> "Library" -> "Kolibri QA Channel"
3. Go to "HTML5" sub-folder in the "Folders" tab in the side panel
4. Scroll to the very bottom of the page

Context

• Kolibri version: Kolibri 0.15.1.dev0+git.20220125194959
• Operating system: Ubuntu 20.04.3 LTS
• Browser: Chrome 97.0.4692.99 (Official Build) (64-bit)

[MisRob]

@jtamiace Do you have any suggestions on how to solve this?

[jtamiace]

I think another related problem is that the order of folders and resources set on Studio is not preserved when they are both in the same folder level. My suggestion is to use dividers like in 1a here, maybe 24px of space above and below, but can experiment to see what feels best. Or, to simply increase the amount of space used as in 1b, but I don't think that will be clear enough.

If there's any argument to not preserve the order of folders/resources set on Studio, we can have a separate "In this folder" label that isn't clickable, and aggregates any resources at that folder level into one place. This might be fine if the folder is just a collection of things, but could be confusing for a course-like structure if an "intro" video and "conclusion" document/video are both in the same place.

[MisRob]

Thank you, @jtamiace, I appreciate dividers (1a). Without them, it's not very clear to me even with larger spaces.

Regarding preserving the order of folders/resources, I'm not familiar if there were some related discussions or technical limitations perhaps, so would be good to discuss with the team.

[marcellamaki]

Closed with #12737