feat(web): warn mobile users and present waitlist

[tyler-dane]

• Introduced the MobileGate component to inform users that the application isn't optimized for mobile yet, featuring a waitlist button.
• Implemented comprehensive tests for the MobileGate component, covering rendering, button behavior, and accessibility.
• Updated RootView to conditionally render MobileGate for mobile users, enhancing user experience across devices.

Closes #1430

---

Note

Medium Risk
Introduces a new top-level gating path that prevents the entire app from rendering on mobile; mistakes could inadvertently block non-mobile users or affect initial render behavior due to the updated useIsMobile initialization.

Overview
Mobile view now blocks the main app: RootView detects small viewports via useIsMobile() and renders a new MobileGate screen instead of mounting UserProvider/SocketProvider/AuthenticatedLayout.

Adds the MobileGate component (copy + “Join Mobile Waitlist” button opening an external URL) with unit tests for rendering, click behavior, and basic accessibility. Updates useIsMobile to compute the initial state synchronously via matchMedia (SSR-safe) to avoid first-render mounting work, and adjusts OAuth overlay Playwright suites to test.skip on mobile since the gate prevents the overlay from rendering.

^{Written by Cursor Bugbot for commit 4b17060. This will update automatically on new commits. Configure here.}

[Copilot]

Pull request overview

This PR introduces a mobile-only gate view to inform users that the app is not yet optimized for mobile and to direct them to a waitlist, while wiring it into the root view and adding focused component tests.

Changes:

• Updated RootView to use the useIsMobile hook and conditionally render MobileGate instead of the authenticated layout on mobile.
• Added a new MobileGate component with full-screen layout, explanatory copy, and a “Join Mobile Waitlist” CTA opening an external waitlist URL in a new tab.
• Added unit tests for MobileGate covering rendering, button behavior (window opening), and basic accessibility semantics.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/web/src/views/Root.tsx	Adds mobile detection via useIsMobile and short-circuits rendering to MobileGate when on mobile instead of the authenticated layout.
packages/web/src/components/MobileGate/MobileGate.tsx	Implements the mobile gate UI with themed styling, explanatory text, and a waitlist button wired to window.open.
packages/web/src/components/MobileGate/MobileGate.test.tsx	Provides tests to verify MobileGate’s title, message, button presence, click behavior, and heading/button accessibility roles.

Comments suppressed due to low confidence (1)

packages/web/src/views/Root.tsx:18

• The new conditional rendering in RootView that swaps between MobileGate and the authenticated layout based on useIsMobile isn’t covered by tests, even though other views and mobile onboarding components (e.g. DayView, MobileWarning) have dedicated tests. To keep behavior stable and aligned with the project’s testing guidelines, add tests that mock useIsMobile to return both true and false and assert that MobileGate is rendered for mobile and AuthenticatedLayout (with its providers) is rendered for non-mobile.

export const RootView = () => {
  const isMobile = useIsMobile();

  if (isMobile) {
    return <MobileGate />;
  }

  return (
    <UserProvider>
      <SocketProvider>
        <AuthenticatedLayout />
      </SocketProvider>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on March 3

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[tyler-dane]

@copilot please update

[tyler-dane]

@copilot update this component to use tailwind, not styled-components

[Copilot]

@tyler-dane I've opened a new pull request, #1435, to work on those changes. Once the pull request is ready, I'll request review from you.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.