feat(Discussion): Add masonry layout

[breity]

Changes

• Improve student and teacher Discussion views with a masonry layout (grid lanes that automatically adjust space between posts when new posts are added and post content heights change).
• Utilize new CSS feature display: grid-lanes.
• Fall back to js masonry implementation for browsers that don't yet support display: grid-lanes.
• Clean up discussion styles.

Test

• Make sure Discussion activities work as before in both the student unit view and teacher grading view.
• Ensure that you can create new posts and replies and add images to posts in the student view.
• Ensure that you can hide and show posts and replies in the teacher grading view and that you can toggle opened and closed hidden posts and replies.

[qltysh]

❌ 2 blocking issues (2 total)

Tool	Category	Rule	Count
qlty	Structure	Function with many parameters (count = 11): constructor	1	❌
qlty	Duplication	Found 24 lines of similar code in 5 locations (mass = 71)	1	❌

[qltysh]

Function with many parameters (count = 11): constructor [qlty:function-parameters]

[qltysh]

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

Modified Files with Diff Coverage (2)

Rating	File	% Diff	Uncovered Line #s
	.../discussion/discussion-student/discussion-student.component.ts	43.8%	108-120, 124-137...
	...mponents/discussion/class-response/class-response.component.ts	0.0%	42
	Total	42.4%

🤖 Increase coverage with AI coding...

In the `discussion-masonry-layout` branch, add test coverage for this new code:

- `src/assets/wise5/components/discussion/class-response/class-response.component.ts` -- Line 42
- `src/assets/wise5/components/discussion/discussion-student/discussion-student.component.ts` -- Lines 108-120, 124-137, and 141-144

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.

[hirokiterashima]

Looks good! Ready to merge after fixing these minor issues:

1. Student view without image attachment looks off:

2. We should call emit() directly in template. I added an inline comment.

[hirokiterashima]

Call emit() directly in template?

[hirokiterashima]

🎉 This PR is included in version 5.232.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀