From 89f9858599dcddc7215df3fa834b7247f72a4a2a Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Tue, 16 Jun 2020 22:11:03 +0200
Subject: [PATCH 1/3] feat: add new component to make the scroll fix to the
 bottom

---
 src/components/StickyList.js | 45 ++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/StickyList.js

diff --git a/src/components/StickyList.js b/src/components/StickyList.js
new file mode 100644
index 00000000..a81c0494
--- /dev/null
+++ b/src/components/StickyList.js
@@ -0,0 +1,45 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { FixedSizeList as List } from 'react-window';
+
+function StickyList(
+  {
+    follow = false,
+    mode = 'bottom',
+    height,
+    itemCount,
+    itemData,
+    itemSize,
+    width,
+    outerElementType,
+    children,
+  },
+  ref,
+) {
+  const innerRef = useRef();
+  useEffect(() => {
+    if (ref.current && follow && innerRef.current) {
+      if (mode === 'bottom') {
+        ref.current.scrollTo(innerRef.current.offsetHeight);
+      } else if (mode === 'top') {
+        ref.current.scrollTo(0);
+      }
+    }
+  }, [itemCount, follow]);
+
+  return (
+    <List
+      ref={ref}
+      height={height}
+      itemCount={itemCount}
+      itemData={itemData}
+      itemSize={itemSize}
+      width={width}
+      innerRef={innerRef}
+      outerElementType={outerElementType}
+    >
+      {children}
+    </List>
+  );
+}
+
+export default forwardRef(StickyList);

From e6e41ae2c883f173ad31d069e9bcc289a2004691 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Tue, 16 Jun 2020 22:12:00 +0200
Subject: [PATCH 2/3] feat: use new StickyList and reverse log list

---
 src/components/DomEvents.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/DomEvents.js b/src/components/DomEvents.js
index 35b70316..2d25bdab 100644
--- a/src/components/DomEvents.js
+++ b/src/components/DomEvents.js
@@ -6,12 +6,12 @@ import usePlayground from '../hooks/usePlayground';
 import state from '../lib/state';
 import { eventMap } from '@testing-library/dom/dist/event-map';
 import { VirtualScrollable } from './Scrollable';
-import { FixedSizeList as List } from 'react-window';
 import throttle from 'lodash.throttle';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import IconButton from './IconButton';
 import TrashcanIcon from './TrashcanIcon';
 import EmptyStreetImg from '../images/EmptyStreetImg';
+import StickyList from './StickyList';
 
 function onStateChange({ markup, query, result }) {
   state.save({ markup, query });
@@ -133,9 +133,8 @@ function DomEvents() {
     if (!node) return;
 
     addLoggingEvents(node, (event) => {
-      // insert at index 0
       event.id = buffer.current.length;
-      buffer.current.splice(0, 0, event);
+      buffer.current.push(event);
       setTimeout(flush, 0);
     });
   }, []);
@@ -185,7 +184,9 @@ function DomEvents() {
             ) : (
               <AutoSizer>
                 {({ width, height }) => (
-                  <List
+                  <StickyList
+                    follow={true}
+                    mode="bottom"
                     ref={listRef}
                     height={height}
                     itemCount={eventCount}
@@ -195,7 +196,7 @@ function DomEvents() {
                     outerElementType={VirtualScrollable}
                   >
                     {EventRecord}
-                  </List>
+                  </StickyList>
                 )}
               </AutoSizer>
             )}

From 97840de7bbed52eed2dbf19d0248db853b598a37 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Wed, 17 Jun 2020 15:13:29 +0200
Subject: [PATCH 3/3] fix: height issue

---
 src/components/StickyList.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/StickyList.js b/src/components/StickyList.js
index a81c0494..b4e60d2b 100644
--- a/src/components/StickyList.js
+++ b/src/components/StickyList.js
@@ -18,7 +18,10 @@ function StickyList(
   const innerRef = useRef();
   useEffect(() => {
     if (ref.current && follow && innerRef.current) {
-      if (mode === 'bottom') {
+      if (
+        mode === 'bottom' &&
+        innerRef.current.offsetHeight > ref.current.props.height
+      ) {
         ref.current.scrollTo(innerRef.current.offsetHeight);
       } else if (mode === 'top') {
         ref.current.scrollTo(0);