Unprocessed SASS expression in Thumbnail

[bjester]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Observed behavior

After removing Less and upgrading Sass, we had some issues with unprocessed Sass making its way into CSS. We resolved most of them, but it appears Thumbnail.vue still has some issues. It uses some calculations to ensure correct aspect ratio and positioning of a thumbnail placeholder.

As it is written, some of the calculations are probably too complex to be rendered directly to a CSS calc. Although, some of the calculations are simply based off constant parameters, meaning those can be calculated in SASS and rendered as constants, thereby maintaining the calculation's explanation and parameterization, but simplifying the produced CSS.

Expected behavior

No unprocessed SASS

User-facing consequences

This particular issue causes slight misalignment, which could be more egregious in other browsers.

Errors and logs

Additional information

Steps to reproduce the issue

1. Have a large-ish channel on your Studio instance, with some nodes that have no thumbnail
2. Open the Channel's details view
3. Observe at the very bottom the Sample content from this channel has thumbnails (with and without an actual thumbnail picture), and in particular these thumbnails have an embedded kind header
4. Open dev tools and inspect it
5. Observe some unprocessed SASS

Usage Details

• OS: Ubuntu
• Browser: Chrome 136.0.7103.113
• URL: https://unstable.studio.learningequality.org/en/channels/#/public/e66cd89375845ebf864ea00005be902d/details?last=CATALOG_ITEMS