Large Screenshots - Usability Challenges

[drewpost]

When viewing the large screenshots from the test result screen have a few UX challenges

1 - The "enlarge" icon is in a random position on the screenshot. Further, especially on lighter backgrounds, it's virtually impossible to see

2 - When you've opened the large screenshots, I'd expect to be able to use the keyboard arrows to advance forwards and backwards through the journey but this does not work which means I have to find and click the tiny buttons which takes us to the next challenge

3 - These buttons move around relative to the length of the step title. This makes it impossible to quickly scan through the screenshots as you're constantly having to look for where the arrows are from step to step.

[elasticmachine]

Pinging @elastic/observability-design (design)

[drewpost]

Actions:
Get rid of all forward/backward buttons and expand button screenshot from the thumbnail
Add keyboard controls (left and right cursor) to move between screenshots on the lightbox (expanded) version of the image
Move controls on the lightbox (expanded) image from the bottom, to the left and right of the image (not on top of the image itself)
The thumbnail image should never change, but always represent step 1 (even if the lightbox (expanded) version is changed to a different step)

[paulb-elastic]

Discussed in refinement, closing as the feature works better now (accepting no keyboard prev/next controls).