fix: fixed image overflow in message attachments

[fxnm]

Summary

Fixed the overflow if a message attachment is wider than the Viewport. (https://developers.mattermost.com/integrate/reference/message-attachments/#images) This is done by modifying the getViewPortWidth and introducing a new VIEWPORT_IMAGE_ATTACHMENT_OFFSET. The value of it is calculated with the padding of the MessageAttachment component (2 * 12) + the padding of the AttachmentImage component (2,5 + 5) => 31,5

https://github.com/mattermost/mattermost-mobile/blob/9b450cf68b60b47ebcb4ca84af9cc07293397567/app/components/post_list/post/body/content/message_attachments/message_attachment.tsx#L42

https://github.com/mattermost/mattermost-mobile/blob/9b450cf68b60b47ebcb4ca84af9cc07293397567/app/components/post_list/post/body/content/message_attachments/attachment_image/index.tsx#L26-L28

Ticket Link

None

Checklist

• [ ] Added or updated unit tests (required for all new features)
• [X] Has UI changes
• [ ] Includes text changes and localization file updates
• [ ] Have tested against the 5 core themes to ensure consistency between them.
• [ ] Have run E2E tests by adding label E2E iOS tests for PR.

Device Information

This PR was tested on:

• Samsung Galaxy S22, Android 14

Screenshots

Example Attachment

"attachments": [
        {
            "fallback": "test",
            "color": "#FF8000",
            "image_url": "https://raw.githubusercontent.com/mattermost/mattermost/refs/heads/master/server/tests/orientation_test_1.jpeg"
        }
    ]

Before	After

Release Note

Fixed image overflow when using message attachments.

[mattermost-build]

Hello @fxnm,

Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.

[fxnm]

I also would recommend, that the padding of the AttachmentImage should be unified for a even spaced border around the image component.

[lukasnacht]

Please review, this is a high priority for one of our paying customers