```javascript
import styled from '@emotion/styled';
export const ElementInViewParent = styled.div`
display: flex;
flex-direction: column;
position: relative;
`;
export const ElementInView = styled.div`
position: absolute;
/**
* instead of "bottom: 100vh", we do "bottom: 0" and "top: -100vh",
* so that the "height: auto" will make the element full of height,
* starting from the top position (100vh from the bottom),
* up until the very bottom.
*
* if we didn't do this (1st option), the height would be 0.
*
*/
/* bottom: 100vh; */
bottom: 0;
/* top: -100vh; */
top: -1000vh; /**
*
* fetch 10x earlier.
*
* for this to work, you need to make sure that
* even if you fetch very few items (but there are more)
* (i.e. the pagination limit is very small, e.g. 10),
* the 'ElementInView' will get re-rendered properly,
*
* so that even if the first 10, 20, or say 50 items
* are not enough to put the 'ElementInView' deep enough
* to make the 'ElementInView' invisible,
* you will still keep fetching more data
* by re-rendering the element (thus it disappears & re-appears),
* until it is actually hidden.
*
* in our case, we achieve this by rendering the 'ElementInView'
* in the 'BoardCard' (i.e. individual item) itself,
* _not_ in a 'BoardColumn'.
* for this, we pass in the 'isLast' prop
* so that only the last item renders the element,
* and ofc the 'fetchMoreData' prop too.
*
* overall, this helps achieve optimal performance with intersection observer,
* because with the 'react-intersection-observer' lib, we can now set the 'triggerOnce'
* prop to 'true', meaning it won't keep polling
* (internally, it unsubscribes the intersection observer -- this is why
* the re-render is needed).
*
* ---
*
* additional sidenote: 'react-intersection-observer' lib was buggy with it's 'useInView' hook
* in multiple occasions:
* 1. when used with 'triggerOnce', it'd slow down, but still would keep triggering;
* 2. if you used their 'onChange' instead of using 'inView' with a 'useEffect',
* the onChange would run insanely much, probably every X milliseconds.
* the 'triggerOnce' didn't have any effect for it either.
*
* i suspect this is because the 'inView' goes thru React's 'setState',
* and it could get limited/batched, meanwhile the 'onChange' would get
* called directly, thus spamming a lot.
*
*
* ---
*
* see the PR where we implemented this:
* https://github.com/pipedrive/account-management-ui/pull/108
* (includes video showcasing the 1st above explained case)
*
*/
width: 100%;
height: auto;
/**
* INFINITE_SCROLL_DEBUG:
*
*/
/* background-color: red; */
`;
```