modrinth
Project thumbnails frames are still poorly designed
Please confirm the following.
- [X] I checked the existing issues for duplicate feature requests
- [X] I have checked that this feature request is not on our roadmap
What parts of Modrinth is your feature request related too?
Website
Is your suggested feature related to a problem? Please describe.
This suggestion follows the one I made earlier when project banner on the project's main page was still a thing: #1377 The issue was "fixed" by the fact project banners no longer exist in single project pages, but the issue with the ratio in projects lists is still a problem.
When the wrapper is maxed on desktop, when the window reaches a minimal width of 1280px, the project card's thumbnail has a size of 466x160px, so a ratio of almost 3/1, which makes content really difficult to fit in them.
Moreover, the ratio is still not fixed. Following the responsive design depending on the devices you use, or the fact your resize your browser's window, the frame's size changes. The ratio here for example became around 2.3/1:
Describe the solution you'd like
In my opinion, ratios for thumbnails should never exceed 2/1, and they must be fixed. I already provided an example of how it could render in #1377 using the aspect-ratio CSS property that allows you to keep a dynamic width for responsive purposes, while also keeping a fixed ratio.
Only thing I did in the following example is add the .project-card element the aspect-ratio: 2/1; property, and changing its height to height: auto; instead of 10rem, and did same thing with height for its inner img element. It is a very quick and easy fix to make.
Of course, images here appear blurry because the website transform them when you upload them (and it's also another issue https://github.com/modrinth/code/issues/2373), but it should be as well converted into a 2/1 truncated image with an adequate size.
Describe alternatives you've considered
No response
Additional context
I hope this suggestion will be considered, as the projects page's contents is hard to manage properly for the moment. Good luck for the future with this amazing website.
