Increasing scrolling room for question lists in MultiPaneLayout

[sairina]

Summary

Removed the maxHeight calculations for the MultiPaneLayout container because the original issue (#6945) is partially caused by the header of this component being non-responsive, and thus, when the window height is reduced, the header continues to take up the same amount of space in the visible window (also seen in #6900), which causes the remaining portions (the aside and main parts) of the component to shrink dramatically to fit. Removing the calculation allows for the bottom portion to be fully visible on page scroll.

Because this component is used in several places, changes are also documented below. There is also tech debt in this component, and that has been filed as a separate issue.

LessonContentPreviewPage (The main issue)

NOTE: The reason this particular component has major problems with the MultiPaneLayout is because of all of the information in the header. Other components tend not to have such an obvious issue.

Before	After

ExamReport

Before	After

LearnerExercisesReport

Before	After

QuestionLearnersReport

Before	After

References

• Addresses Exercise question preview desperately needs more scrolling room #6945
• Connected issues: headers can take up lots of space on small screens #6900 and Refactor MultiPaneLayout with K*components #8141

Reviewer guidance

To see the original issue, LessonContentPreviewPage

1. Log in as Coach
2. Click on "Plan" >"Quizzes" > "New quiz"
3. Make a new quiz, and while previewing it to choose questions, change the size of the window. You should still be able to see all the questions in the question list, by scrolling through the page scroll.

ExamReport

1. Sign in as learner
2. Click on Quizzes
3. Click on a quiz that you have completed to see a report

LearnerExerciseReport

1. Log in as coach
2. Click on Reports > Lessons (click on a lesson) > Report (click on a lesson) > Report (click on a learner's name)
3. View the LearnerExerciseReport

QuestionLearnersReport

1. Login as coach
2. Click on Reports > Lessons (click on a lesson) > Difficult questions (click on a question)
3. View the individual question, which will be the component, QuestionLearnersReport

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[indirectlylit]

This looks like a big improvement to responsiveness!

Quick question: it looks like there might be an issue with missing icons or unexpected empty space in the ExamReport and LearnerExerciseReport gifs – is this a known issue?

[sairina]

@indirectlylit re:

Quick question: it looks like there might be an issue with missing icons or unexpected empty space in the ExamReport and LearnerExerciseReport gifs – is this a known issue?

I did notice those empty spaces. I haven't been able to find those as known issues, but I don't actually know what it should look like. I'm happy to file an issue, but I would need some help to complete the "Expected Behavior" portion of the issue.

[indirectlylit]

I think we used to show the notStarted icon there because those rows are for 'no attempts made' questions

[jonboiser]

Looks good! I made an issue for the missing icon bug.

[indirectlylit]

thanks both!