Changed headers position to fixed

src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx

@@ -75,6 +75,7 @@ export const CollectionContactList: React.SFC<CollectionContactListProps> = (pro
       button={{ show: false, label: '' }}
       pageLink="contact"
       listIcon={collectionIcon}
+      isDetailsPage
       deleteModifier={{
         icon: 'cross',
         variables: getDeleteQueryVariables,

src/containers/List/List.module.css

@@ -43,15 +43,29 @@
   text-decoration: none;
 }
 
+.Body {
+  margin-top: 100px;
+}
+
 .Header {
+  position: fixed;
+  background-color: #f9f7f3;
+  top: 0;
+  width: calc(100% - 233px);
   display: flex;
   padding: 10px;
+  padding-top: 6px;
+  z-index: 1000;
   padding-right: 24px;
   justify-content: space-between;
   align-items: center;
   border-radius: 10px;
-  margin-top: 6px;
-  height: 70px;
+  height: 100px;
+}
+
+.DetailsPageHeader {
+  composes: Header;
+  width: calc(68% - 200px);
 }
 
 .Icon {
@@ -126,9 +140,9 @@
   color: #93a29b;
   font-size: 16px;
   margin: 0 auto;
-  margin-top: 100px;
+  margin-top: 200px;
   text-align: center;
-  width: 204px;
+  width: 230px;
 }
 
 .ButtonGroup {

src/containers/List/List.tsx

@@ -73,6 +73,7 @@ export interface ListProps {
   defaultSortBy?: string | null;
   removeSortBy?: Array<any> | null;
   noItemText?: string | null;
+  isDetailsPage?: boolean;
 }
 
 interface TableVals {
@@ -119,6 +120,7 @@ export const List: React.SFC<ListProps> = ({
   collapseRow = undefined,
   defaultSortBy,
   noItemText = null,
+  isDetailsPage = false,
 }: ListProps) => {
   const client = useApolloClient();
   // DialogBox states
@@ -604,16 +606,22 @@ export const List: React.SFC<ListProps> = ({
         <div>Sorry, no results found! Please try a different search.</div>
       ) : (
         <div>
-          There are no {noItemText || listItemName}s right now.
+          There are no {noItemText || listItemName}s right now.{' '}
           {button.show && 'Please create one.'}
         </div>
       )}
     </div>
   );
 
+  let headerSize = styles.Header;
+
+  if (isDetailsPage) {
+    headerSize = styles.DetailsPageHeader;
+  }
+
   return (
     <>
-      <div className={styles.Header} data-testid="listHeader">
+      <div className={headerSize} data-testid="listHeader">
         <Typography variant="h5" className={styles.Title}>
           <IconButton disabled className={styles.Icon}>
             {listIcon}
@@ -645,10 +653,11 @@ export const List: React.SFC<ListProps> = ({
         </div>
       </div>
 
-      {backLink}
-      {/* Rendering list of items */}
-
-      {itemList.length > 0 ? displayList : noItemsText}
+      <div className={styles.Body}>
+        {backLink}
+        {/* Rendering list of items */}
+        {itemList.length > 0 ? displayList : noItemsText}
+      </div>
     </>
   );
 };