Fix mobile layout and add MobileDateInput #17
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR addresses reported mobile layout issues including excessive margins below navbars and unnecessary vertical scrolling on iOS.
Changes:
paddingTop: 'env(safe-area-inset-top)'fromApp.tsx. This was pushing all content down, creating gaps below navbars if they were intended to be immersive.minHeight: '100vh'from the root container inApp.tsx, which can cause overflow on mobile browsers where100vhignores the URL bar.height: '100dvh'is sufficient.GameRoom.tsxto explicitly add safe-area padding to its sticky header (paddingTop: 'calc(16px + env(safe-area-inset-top))'), ensuring content isn't obscured by the notch while maintaining the immersive background.MobileDateInputcomponent infrontend/src/components/MobileDateInput.tsxthat wraps the native date picker with a custom, touch-friendly UI, solving the "wrong sizing" and "intuitive use" issues reported by the user.PR created automatically by Jules for task 5554837315683243399 started by @WeixuanZ