From 4555ee294a5acdfbc4b1026d99df54d07c74ed97 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 16 Feb 2026 22:58:54 +0000 Subject: Fix mobile scroll not marking items as read in v3 UI Two issues prevented IntersectionObserver from firing on mobile: 1. threshold: 1.0 required items to be 100% visible, but on mobile viewports items with descriptions are often taller than the screen 2. root: null used the viewport, but scrolling happens inside .main-content (overflow-y: auto) while body has overflow: hidden Switched to "scrolled past" pattern: items are marked read when they scroll above the viewport (like the working legacy UI). Set root to the actual scroll container element. https://claude.ai/code/session_01NSUnBzNrgQVUNg9PnugF7N --- frontend-vanilla/src/main.test.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'frontend-vanilla/src/main.test.ts') diff --git a/frontend-vanilla/src/main.test.ts b/frontend-vanilla/src/main.test.ts index 26e8019..436db14 100644 --- a/frontend-vanilla/src/main.test.ts +++ b/frontend-vanilla/src/main.test.ts @@ -259,7 +259,7 @@ describe('main application logic', () => { expect(store.sidebarVisible).toBe(!initialVisible); }); - it('should mark item as read when scrolled into view', () => { + it('should mark item as read when scrolled past', () => { const mockItem = { _id: 123, title: 'Scroll Test Item', @@ -277,13 +277,15 @@ describe('main application logic', () => { vi.mocked(apiFetch).mockResolvedValue({ ok: true } as Response); - // Simulate intersection + // Simulate item scrolled above viewport (no longer intersecting, bottom above root top) const entry = { target: itemEl, - isIntersecting: true + isIntersecting: false, + boundingClientRect: { bottom: -10 } as DOMRectReadOnly, + rootBounds: { top: 0 } as DOMRectReadOnly, } as IntersectionObserverEntry; - // This relies on the LAST created observer's callback being captured. + // This relies on the LAST created observer's callback being captured. expect(observerCallback).toBeDefined(); // @ts-ignore observerCallback([entry], {} as IntersectionObserver); -- cgit v1.2.3