ergosteurandClaude Opus 5
0dc6a8372c
Docker Build and Publish / build-and-push (push) Failing after 10s
Tapping a post on a phone now opens a real feed page — header, media, actions, caption, next post peeking in below — scrolled with the browser's own vertical scrolling rather than swipe gestures. Desktop keeps the modal, where a centred sheet with side arrows suits a pointer. Only a window of posts is mounted: a profile here holds up to 1129 posts and mounting them all would mean as many full-size images. The window grows in both directions as you scroll. Growing upwards shifts everything below it, so the scroll offset is corrected in the same frame, before paint — measured against the real archive, an anchored post moves exactly one screen per scroll with no jump. Only the post crossing the viewport centre plays its video; the rest stay paused, so a feed of reels doesn't play ten at once. The URL tracks that same post, so scrolling updates /<archive>/p/<shortcode>/ the way Instagram does, and the back button returns to the grid with its scroll position intact. Feed video sizes to the container width rather than its intrinsic size: a <video> reports 300x150 until metadata loads, which made it render narrow and then jump to full width. It also gets a taller height ceiling than the modal so ordinary portrait media fills the width instead of sitting in side bars. The carousel is extracted into a shared MediaCarousel used by both surfaces, so horizontal paging behaves identically; touch-action keeps vertical scrolling passing through to the feed. PostModal loses its now-dead mobile swipe branch. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011uBWhwV3wFQ5MBCcMHHem7
28 lines
875 B
TypeScript
28 lines
875 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
/** Matches Tailwind's `md` breakpoint, the point where the layout splits. */
|
|
const MOBILE_QUERY = '(max-width: 767px)';
|
|
|
|
/**
|
|
* True on phone-sized viewports.
|
|
*
|
|
* Drives more than styling: mobile opens posts as a scrollable feed page while
|
|
* desktop uses the modal, so this needs to be real state rather than a CSS
|
|
* media query.
|
|
*/
|
|
export const useIsMobile = () => {
|
|
const [isMobile, setIsMobile] = useState(
|
|
() => typeof window !== 'undefined' && window.matchMedia(MOBILE_QUERY).matches,
|
|
);
|
|
|
|
useEffect(() => {
|
|
const query = window.matchMedia(MOBILE_QUERY);
|
|
const onChange = (e: MediaQueryListEvent) => setIsMobile(e.matches);
|
|
query.addEventListener('change', onChange);
|
|
setIsMobile(query.matches);
|
|
return () => query.removeEventListener('change', onChange);
|
|
}, []);
|
|
|
|
return isMobile;
|
|
};
|