fix: move inverse sentinel to last DOM child so it sits at visual top in column-reverse layout

Author: iamdarshshah

src/__tests__/inverse.test.tsx

@@ -52,7 +52,7 @@ describe('inverse mode triggers next near top', () => {
     expect(options.rootMargin).toBe('20% 0px 0px 0px');
   });
 
-  it('renders sentinel as first child in inverse mode', () => {
+  it('renders sentinel as last child in inverse mode', () => {
     const { container } = render(
       <InfiniteScroll
         dataLength={5}
@@ -69,8 +69,9 @@ describe('inverse mode triggers next near top', () => {
     const inner = container.querySelector(
       '.infinite-scroll-component'
     ) as HTMLElement;
-    // sentinel must be the first DOM child so the IO top-margin fires correctly
-    expect(inner.firstElementChild).toBe(
+    // sentinel is last DOM child; with flex-direction: column-reverse this puts
+    // it at the visual top, where the IO top-margin extension pre-triggers
+    expect(inner.lastElementChild).toBe(
       MockIntersectionObserver.instances[0].observedElements[0]
     );
   });

src/index.tsx

@@ -330,7 +330,6 @@ export default function InfiniteScroll({
         ref={infScrollRef}
         style={containerStyle}
       >
-        {inverse && sentinel}
         {pullDownToRefresh && (
           <div style={{ position: 'relative' }} ref={pullDownRef}>
             <div
@@ -350,7 +349,7 @@ export default function InfiniteScroll({
         {children}
         {!showLoader && !hasChildrenResolved && hasMore && loader}
         {showLoader && hasMore && loader}
-        {!inverse && sentinel}
+        {sentinel}
         {!hasMore && endMessage}
       </div>
     </div>