After struggling with multiple calculations, I was grateful to finally find a solution, which was also thanks to Chat GPT. Here's my approach: rather than trying to determine the minimum height, I decided to focus on the minimum width, which is generally agreed to be 320 pixels (although I prefer 250 pixels because Chrome dev tools shows the Galaxy Fold, which has a width of 250 pixels, but in most cases, mobile devices have a width of 320 pixels).
Now that we have established the minimum width, we need to find a list of all the aspect ratios that manufacturers produce (height to width ratio). This relationship determines how big or small the width is compared to the height. While considering this list, we need to take into account the orientation and identify the aspect ratio with the largest difference between the height and width. For each height-to-width ratio, we will need to calculate the difference between the height and width (using the absolute value). Once we find the aspect ratio with the highest difference, we can calculate the minimum height using the minimum width value, which we established as 320 pixels.
Suppose the aspect ratio with the biggest difference is 9:16. In that case, we may want to consider rotation and check the scenario where the height is smaller than the width (which would be 16:9). In that case, our minimum height would be 320*9/16=180 pixels. I know the numbers may seem a bit confusing because you would expect the height to be higher than the width of a mobile phone (which is about 568 pixels when we flip the ratio to 9:16), but that only works for mobile devices since they have a width lower than the height.
The approach is to make the height responsive to the width and consider the worst-case scenario for the height at each width and make our content adapt to it ...
We need to do it only once at a larger width, the width responsive assign units relative to the width that respects the calculated minimum height after the width your work on () ... once we make out div rescpect the worst case aspect ratio at a given width with all units relative to the viewport width (or parent width but the parent units must be relative to the width) it will always repect that aspect ratio until it reaches the minimum width which is 320px with a reference to the 180px ...
like that we can be less concerned about our layout fitting whenever it gets ...
I can provide a video description this works well on a login form but note that this approach is not always appropriate sometimes not very often say we can want to use scrolls or force user direction to make sure he have a flexible ux
