The "Report Site Issue" flow shows a preview of the auto-captured screenshot, but it's missing the top and bottom and there's no way to see the whole thing

[dholbert]

STR:

1. While holding your phone in portrait orientation, use Firefox Nightly on Android's "Report Site Issue" menu-option.
2. Click through the process until you get to the part that shows you a screenshot that was automatically captured of the site that you were on.

EXPECTED RESULTS:
I should see (or be able to tap a button to see) the full screenshot that's going to be included in my webcompat report.

ACTUAL RESULTS:
The webcompat.com form only shows you a cropped portion of the screenshot -- just the center -- and as far as I can tell, there's no way to see the full screenshot.

Here's what this looks like right now -- the previewed screenshot that we show to users is the box in the middle here:

Poking in devtools, the element that paints the screenshot-preview looks like this (I've snipped out the data URI for brevity):

<div
  class="form-upload form-element js-image-upload js-Form-group"
  style="'background: url("data:image/jpeg;base64,[...SNIP...]") center center / cover no-repeat;'>

The background data URI is a base64-encoded version of the locally-captured screenshot; and the "cover" keyword at the end there is what causes the image to be cropped. If we instead were to use contain, then the user would at least see the full screenshot (though it would be scaled down, which is also not-great, but possibly a step in the right direction of giving them an idea of what-was-actually-captured).

I'm not a UX designer but I imagine it'd be best to show some sort of scaled-down (not cropped) version of the screenshot, possibly with a button to let the user optionally see a popup with a larger version of the screenshot (maybe not quite fullscreen to avoid covering up the whole submission form, but nearly-fullscreen?)