Fastlane - screenshots do not fit correctly in "frameit" viewport

[AmitMY]

Current Behavior

Currently, we generate screenshots based on the device's screen https://github.com/sign/translate/blob/master/tools/mobile/metadata/devices.ts#L7

Then, using imagemagick pad the screenshot to fit the viewport https://github.com/sign/translate/blob/master/tools/mobile/metadata/metadata.ts#L25-L26

This causes two issues:

1. On some devices, the viewport and screen are equal, and so we fill the entire screen, not allocating space for the statusbar (example)
2. On other devices, we may pad too much, making the app centered, but quite below the "notch" (example)

Expected Behavior

We ideally need some way to know the values of the css variables like safe-area-inset-top for every device, and pad the image from the top, not equally top and bottom.

This might help? https://github.com/fastlane/fastlane/blob/master/frameit/frames_generator/offsets.json But needed for more devices, and android devices as well.

[AmitMY]

Issue for playwright: https://github.com/microsoft/playwright/issues/29334 Automatically get the safe area inset: https://github.com/sign/apple-dimensions Then finally addressed in https://github.com/sign/translate/commit/47204b4ca85db6b2d156df585ec6ecd5f288369c

Before closing this issue, all screenshots should be regenerated

[AmitMY]

Regenerated in https://github.com/sign/translate/commit/39ebdcad7cc536f21112df2235924fe5cbcccd3d