Describe the bug
The main container specifying the height of the website overflows due to the browser UI taking up part of the expected height (see bottom of image in screen shot where the footer is only partially shown)
Instead, the code should use either h-svh max-h-svh for small view height, or h-dvh max-h-dvh for dynamic view height.
These notations account for the adjustments in view height that occur on mobile. The question is if dynamic view height looks good and adjusts well, or if small view height has to be used instead, assuming it doesn't suddenly leave empty space.
Steps to reproduce
Enter the app on mobile.
Expected behavior
The website shows the full site on mobile without excess scrolling.
RoyDefined
commented
6 months ago
Describe the bug The main container specifying the height of the website overflows due to the browser UI taking up part of the expected height (see bottom of image in screen shot where the footer is only partially shown)
The issue is the use of
h-screen max-h-screenin the main container which corresponds to heights using thevhnotation, which corresponds to view height: https://github.com/RoyDefined/WebDoomer/blob/09e2beb63d585c1cee263d337416b754a138851f/src/WebDoomerClient/src/app/layout/layout.component.ts#L10Instead, the code should use either
h-svh max-h-svhfor small view height, orh-dvh max-h-dvhfor dynamic view height. These notations account for the adjustments in view height that occur on mobile. The question is if dynamic view height looks good and adjusts well, or if small view height has to be used instead, assuming it doesn't suddenly leave empty space.Steps to reproduce Enter the app on mobile.
Expected behavior The website shows the full site on mobile without excess scrolling.
Screenshots
Additional context N/A