Exercise question preview desperately needs more scrolling room

[khangmach]

Observed behavior

While previewing an exercise in quiz creation or lesson resource management, there is extremely little room for scrolling through an exercise's question list.

This is more drastic on smaller-medium screens:

Expected behavior

Show the entire question list similar to the quiz preview in Lessons or in the quiz-taking screen

User-facing consequences

The small space is frustrating to scroll through. Often you will find yourself doing a scrolling motion on the trackpad or mouse and accidentally over-scroll outside of the question list container -- which causes the entire page to scroll instead of just the question list.

Steps to reproduce

• Navigate to Coach > Quizzes
• Make a new quiz
• Preview an exercise and scroll through the question list

Context

Tell us about your environment, including:

• Kolibri version: Beta
• Operating system: MacOS
• Browser: Chrome

[khangmach]

This should be an easy fix. We already have an available layout via quiz details page in coach (plan tab -> quizzes -> quiz details)

[sairina]

@khangmach and @jonboiser -

Currently, I've made some changes to the original scroll. Option 1 is on the left, and Option 2 is on the right:

Maintains some scrolling	Has no scrolling

Which one is closer to the behavior we would expect to see? With Option 2, there is no scrollbar at all for the questions column, but gets rid of the maxHeight that the outer container (the MultiPanelLayout component) has, which would have other effects in other components in the code.

[khangmach]

For option 1, do you have to scroll through the page scrollbar first in order to scroll through the question list?

[sairina]

No, you can scroll through the question list without getting to the bottom of the page scroll. That works as long as you are hovering over the question list.

[indirectlylit]

Relevant previous work and discussion:

• Note about UX issues with nested scrolling areas
• Design work on responsive behaviors
• Previous update to quiz view
• Discussion about similar side-by-side scrolling panels and subsequent sketch

My personal rule of thumb has been to always avoid nesting scrolling panels, and when possible to only have a single scrolling area on a page. There are exceptions when this isn't possible, but generally these introduce other complexities on smaller screens.

[sairina]

Couple things I'm thinking about now:

• From the Slack conversation and subsequent gif, I'm gathering that there shouldn't be any scrollbars at all for the page itself - and the scrolling should actually happen in the MultiPaneLayout container?
• That makes me wonder, should there be space between the end of the container and the bottom of the page? (see gifs from comment above) That seems to be creating some of the extra scrolling that's happening on the page scroll.
• Also, it seems that the header in the MultiPaneLayout is giant and does not change even if the size of the window is reduced, which is making the rest of the container shrink, and thus making that space for the QuestionList also shrink. I see that in the spec, the header should say the same, but should that be the case when the height of the window changes (as opposed to the width)?

[sairina]

Also, I noticed that MultiPaneLayout has no K-components - I'm wondering if this is part of the reason why it is also not responsive at different break points (width-wise, for sure) 😬 . Should there be a refactor of this component, instead of just trying to fix the scrolling?

[khangmach]

I'm gathering that there shouldn't be any scrollbars at all for the page itself - and the scrolling should actually happen in the MultiPaneLayout container?

I think we can try this approach. This means that the page length would be determined by the max width of the container though, right?

That makes me wonder, should there be space between the end of the container and the bottom of the page?

I never knew why the extra space was there and it doesn't serve a visible purpose. We can scrap it.

Also, it seems that the header in the MultiPaneLayout is giant and does not change even if the size of the window is reduced

Once it's developed, I want to carry over the page header styles from the new content renderer page. That should take care of the huge header issues.

[sairina]

• Extra space: it's actually in everything, so is there a reason why it is there? @jonboiser @indirectlylit - maybe you have some context?

https://github.com/learningequality/kolibri/blob/develop/kolibri/core/assets/src/views/CoreBase/index.vue#L581