Skip to content

fix(layout): open rooms on iPad using 'Request Desktop Website'#810

Closed
Just-Insane wants to merge 5 commits into
SableClient:devfrom
Just-Insane:fix/ipad-layout
Closed

fix(layout): open rooms on iPad using 'Request Desktop Website'#810
Just-Insane wants to merge 5 commits into
SableClient:devfrom
Just-Insane:fix/ipad-layout

Conversation

@Just-Insane
Copy link
Copy Markdown
Contributor

@Just-Insane Just-Insane commented May 14, 2026

Superseded by #836 — consolidated with #811, #812, #813, #828, #829 into a single mobile/iOS/iPad PR.

iPadOS 13+ Safari reports a macOS user-agent by default, so
ua-parser-js sees os.name === 'Mac OS' and leaves device.type
unset. mobileOrTablet() already handles this via maxTouchPoints > 1,
but three layout gates only checked screenSize === ScreenSize.Mobile
(which is width-based, so a full-width iPad reads as Desktop or Tablet):

- MobileFriendlyPageNav: hides the sidebar when a room is active
- MobileFriendlyClientNav: hides the app nav bar when deep in a route
- createRouter: adds a WelcomePage index route instead of an empty outlet
- PageRoot: suppresses the vertical divider line between nav and content

All four now also check mobileOrTablet() so iPads in desktop-UA mode
get the correct single-panel navigation behaviour.
Copy link
Copy Markdown
Member

@dozro dozro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you're missing the AI checkboxes in the PR description

Replaces mobileOrTablet() with mobileOrTabletLayout() for all layout
decisions in Home, Direct, Space, Explore, and Inbox page components.

mobileOrTablet() returns true for all tablets (including iPad with native
UA or 'Request Desktop Website'), so isMobile was true on iPad, causing
the room list nav to render at width 100% with no resize handle — giving
a broken half-layout where the sidebar took the full width.

mobileOrTabletLayout() is true only for phone-form-factor devices, so
tablets always get the fixed-width desktop sidebar and SidebarResizer.

Space.tsx retains mobileOrTablet() for the swipe-to-room touch gesture,
which is appropriate for all touch devices including tablets.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants