Unrelated to the changes in this PR, but while testing I found that I…

… could not reach my bottom contact in the list view. This was also true on staging. Adding this extra 8px allows for me to at least reach the contact row, though it is not perfect UX.

src/components/Contacts/ContactsList/ContactsList.tsx

@@ -8,6 +8,7 @@ import { InfiniteList } from 'src/components/InfiniteList/InfiniteList';
 import { navBarHeight } from 'src/components/Layouts/Primary/Primary';
 import NullState from 'src/components/Shared/Filters/NullState/NullState';
 import { headerHeight } from 'src/components/Shared/Header/ListHeader';
+import theme from 'src/theme';
 import { ContactRow } from '../ContactRow/ContactRow';
 
 export const ContactsList: React.FC = () => {
@@ -22,7 +23,11 @@ export const ContactsList: React.FC = () => {
     <InfiniteList
       loading={loading}
       data={data?.contacts?.nodes ?? []}
-      style={{ height: `calc(100vh - ${navBarHeight} - ${headerHeight})` }}
+      style={{
+        height: `calc(100vh - ${navBarHeight} - ${headerHeight} + ${theme.spacing(
+          1,
+        )})`,
+      }}
       itemContent={(index, contact) => (
         <ContactRow
           key={contact.id}
@@ -49,6 +54,7 @@ export const ContactsList: React.FC = () => {
           />
         </Box>
       }
+      increaseViewportBy={{ top: 2000, bottom: 2000 }}
     />
   );
 };