Mobile & Tablet Behaviour

CourseWeave is designed primarily for laptop use in sessions, but students will browse on phones. This page notes the deliberate differences.

What changes on mobile (≤ 768 px)

Feature	Desktop	Mobile
Hero background	Looping video	Static image (saves bandwidth)
Hero overlay opacity	~35%	~78% (image is faint; overlay provides contrast)
Hypothesis annotations	Enabled	Disabled — see below
Floating buttons	Pill with label	Icon-only circle
Chat / Report Issue drawers	440 px side panel	Full-width panel

Why Hypothesis is disabled on mobile

Hypothesis injects a toolbar that competes with Starlight’s header navigation (hamburger menu, search) on narrow viewports. On a 375 px screen there is not enough room for both, and the navigation wins — so Hypothesis is suppressed below 768 px via CSS and its JS config.

Annotations made on desktop are still visible when a student reads the same page on desktop later. Nothing is lost; the feature is just not accessible from a phone.

To re-enable, remove the @media (max-width: 768px) block targeting hypothesis-sidebar in src/styles/custom.css and remove the window.innerWidth < 768 guard in astro.config.mjs.

Floating button stack

Two fixed buttons sit bottom-right on every page:

[Report Issue]  bottom: 84 px  (88 px on mobile)
[Ask AI      ]  bottom: 24 px

Both hide when the content creation bar opens. Both hide behind the backdrop when either drawer is open.

China network considerations

All features on mobile use the same endpoints as desktop. No Google services (reCAPTCHA, Fonts, Analytics) are loaded. Hypothesis loads from hypothes.is which is generally reachable from mainland China campus networks on desktop; on mobile it is suppressed anyway.