Fix: Add addition validation rules for max size & ratio

[CamKem]

This PR adds additional validation constraints to prevent people abusing the image uploading on posts.
We recently added a Lightbox & had to adjust the CSS to handle scrolling for edge cases of really long images.

The issue was, we should be preventing any image that is above the aspect ratio of 2:5, as it becomes far to long for the feed. This will solve this problem, so I have changed the Lightbox css to not require scrolling also as it will be responsive, this is the maximum size aspect ratio it will allow, like so:

This is still a really large image so I it will just prevent issues from people abusing the system with very tall images that ruin the feed & light box.

NOTE: I have not added a custom validation rule, I have temporarily used a closure, as I have submitted a PR to the framework to add maxRatio, minRatio & ratioRange on the Dimension ruleset - so we will be able to easily switch to that.
laravel/framework#52482

[steven-fox]

Good work Cam and I like the PR to the framework. 👍

(Haven't pulled & tested this, so sorry if silly question) Would it be wise to keep the lightbox css the way that it was so that tall images are able to be larger with scrolling specifically for mobile devices? Seems like the updates in this PR would restrict a tall image to 85vh which could result in something too small/narrow to make out easily on short screens.

[CamKem]

(Haven't pulled & tested this, so sorry if silly question) Would it be wise to keep the lightbox css the way that it was so that tall images are able to be larger with scrolling specifically for mobile devices? Seems like the updates in this PR would restrict a tall image to 85vh which could result in something too small/narrow to make out easily on short screens.

I did consider this, however I tested it with an image at the maximum allowable aspect ratio & it only scrolls a tiny bit, making it really unnecessary & even somewhat annoying / ugly. Check out this video before the change on a 365x812 (smallest mobile) viewport:

Screen.Recording.2024-08-17.at.9.17.05.AM.mov

Versus a screenshot with the css rule changes:

EDIT: the only place where that may be valid would be tablet significantly smaller than an ipad mini, that was being viewed landscape & the user could just rotate to portrait (which is more common for viewing social feeds anyhow) - so from all the perspectives I have checked it's fine.

[steven-fox]

Gotcha, Cam. I see how the 2:5 ratio constraint keeps the image fairly short and fitting ~nicely without the need to scroll. 👍