feat: improve landscape UI for tablets and phones#145
Open
Chanceium wants to merge 1 commit intoDodoraApp:mainfrom
Open
feat: improve landscape UI for tablets and phones#145Chanceium wants to merge 1 commit intoDodoraApp:mainfrom
Chanceium wants to merge 1 commit intoDodoraApp:mainfrom
Conversation
- Unlock device rotation (orientation: 'default' in Expo config)
- Add orientation/screenSize to Android configChanges to prevent activity recreation
- Stabilize breakpoint detection using shorter dimension (min of width/height) so rotating a phone doesn't jump to tablet tier; TV always returns 'tv' via Platform.isTV
- Add isLandscape to useResponsiveLayout and adjust grid columns per orientation
- Scale hero and cover image heights proportionally in landscape
- Add side-by-side details layout (poster left, info right) for landscape phones/tablets
- Compact tab bar on phones in landscape to save vertical space
- Include left/right safe area edges in landscape for notch/punch-hole handling
- Constrain tablet landscape content width in ResponsiveLayout sidebar mode
- Replace static Dimensions.get('window') with reactive useWindowDimensions in MediaDetailsHeader
Kombustor
requested changes
Feb 11, 2026
Contributor
Kombustor
left a comment
Kombustor
left a comment
There was a problem hiding this comment.
Thank you, awesome contribution! 🥳
| paddingBottom: bottom, | ||
| paddingTop: 10, | ||
| height: 65 + bottom, | ||
| paddingBottom: compactTabs ? 2 : bottom, |
Contributor
There was a problem hiding this comment.
Do we even need this 2 here? Isn't the marginBottom: -2 on the icon just equaling this out?
| paddingTop: 10, | ||
| height: 65 + bottom, | ||
| paddingBottom: compactTabs ? 2 : bottom, | ||
| paddingTop: compactTabs ? 4 : 10, |
Contributor
There was a problem hiding this comment.
I moved these constants to the theme on master, please adjust this accordingly
| ? width * 0.5 | ||
| : undefined; | ||
| : breakpoint === 'tablet' && isLandscape | ||
| ? Math.min(width * 0.75, 1000) |
Contributor
There was a problem hiding this comment.
Don't hardcode, use theme
| <ScrollView> | ||
| <Box flexDirection="row" padding="l" gap="l" position="relative"> | ||
| {/* Left column: poster */} | ||
| <Box width={isMobile ? 140 : 180}> |
Contributor
There was a problem hiding this comment.
don't hardcode, use theme
| const isLandscape = width > height; | ||
|
|
||
| // In landscape, scale hero height to avoid consuming the entire viewport | ||
| const heroHeight = isLandscape ? Math.min(HERO_HEIGHT, height * 0.7) : HERO_HEIGHT; |
Contributor
There was a problem hiding this comment.
is in theme on master now
|
|
||
| // Grid columns based on breakpoint | ||
| // Grid columns based on breakpoint + orientation | ||
| const columns = useMemo(() => { |
Contributor
There was a problem hiding this comment.
this was unused and got removed on master
| }, [isTV, isTablet, isLandscape]); | ||
|
|
||
| // Max content width | ||
| const containerMaxWidth = useMemo(() => { |
Contributor
There was a problem hiding this comment.
this was unused and got removed on master
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
Adds proper landscape support for Android tablets and phones. Previously the app was locked to portrait orientation, so landscape was just the portrait layout stretched
Testing