Image thumbnails should be right-aligned

[charlesh88]

Summary

When the number of image thumbnails is smaller than the available display area, they are being drawn from the left - this is incorrect, and caused confusion during Feb egress testing.

Expected vs Current Behavior

Instead, image thumbs should always be right-aligned, in the same way that data points would be spatially placed in a plot view.

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken? Not positive this is a regression, but think we used to do this properly.
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?

Steps to Reproduce

1. View an imagery endpoint.
2. Set the Time Conductor such that the number of available images doesn't fill the thumbs holder.
3. Observe that image thumbs appear from the left in the thumbs holder.

Environment

• Open MCT Version: 1.8.4
• Deployment Type: stable/, testathon/
• OS: Any
• Browser: Any

[charlesh88]

Super-easy CSS-only change: set .c-imagery__thumbs-wrapper to use flex-direction: row-reverse.

[charlesh88]

Ignore the previous comment, which reverses the order of the thumbnails. The right approach is justify-content: flex-end added to '.c-imagery__thumbs-wrapper`.

[khalidadil]

Verified Fixed in Testathon on 04/25/2022

[charlesh88]

Verified fixed Testathon 04-25-22, but see related issue in #4850.