Update V2/V3 'mark as read' logic to require item bottom to be above viewport, while keeping V1 unchanged

2 files changed, 6 insertions, 4 deletions

diff --git a/frontend/src/components/FeedItems.test.tsx b/frontend/src/components/FeedItems.test.tsx
index ad8bf4f..a1ec761 100644
--- a/frontend/src/components/FeedItems.test.tsx
+++ b/frontend/src/components/FeedItems.test.tsx
@@ -96,7 +96,9 @@ describe('FeedItems Component', () => {
     });
 
     // Press 'j' to select first item
-    fireEvent.keyDown(window, { key: 'j' });
+    await act(async () => {
+      fireEvent.keyDown(window, { key: 'j' });
+    });
 
     // Item 1 (index 0) should be selected.
     await waitFor(() => {
@@ -150,7 +152,7 @@ describe('FeedItems Component', () => {
       if (this.id && this.id.startsWith('item-')) {
         // Item top is -50 (above container top 0)
         return {
-          top: -50, bottom: 50, height: 100, left: 0, right: 1000, width: 1000, x: 0, y: 0,
+          top: -150, bottom: -50, height: 100, left: 0, right: 1000, width: 1000, x: 0, y: 0,
           toJSON: () => { }
         } as DOMRect;
       }
diff --git a/frontend/src/components/FeedItems.tsx b/frontend/src/components/FeedItems.tsx
index e2df011..e38850a 100644
--- a/frontend/src/components/FeedItems.tsx
+++ b/frontend/src/components/FeedItems.tsx
@@ -216,8 +216,8 @@ export default function FeedItems() {
 
       const rect = el.getBoundingClientRect();
 
-      // Mark as read if the top of the item is above the top of the container
-      if (rect.top < containerRect.top) {
+      // Mark as read if the bottom of the item is above the top of the container
+      if (rect.bottom < containerRect.top) {
         markAsRead(item);
       }
     });