Fix outstanding issues #14

src/common/components/DappListItem/DappListItem.jsx

@@ -36,7 +36,9 @@ const DappListItem = props => {
         isRanked ? styles.rankedListItem : styles.listItem
       } ${visible ? '' : styles.transparent}`}
     >
-      {isRanked && <div className={styles.position}>{position}</div>}
+      {isRanked && (
+        <div className={position ? styles.position : null}>{position}</div>
+      )}
       <div
         className={styles.imgWrapper}
         onClick={() => onToggleProfileModal(dapp.id, name)}

src/common/components/Modal/Modal.module.scss

@@ -45,7 +45,9 @@
     background: #939ba1;
     cursor: pointer;
     transform: rotate(45deg);
-    z-index: 99;
+    z-index: 999;
+    position: sticky;
+    margin-left: 90%;
   }
 }
 

src/modules/HighestRanked/HighestRanked.module.scss

@@ -18,18 +18,6 @@
 
   @media (min-width: $desktop) {
     // grid-auto-flow: row;
-    grid-template-rows: repeat(4, 1fr);
-    grid-template-columns: unset;
-    overflow-x: hidden;
-  }
-
-  @media (min-width: 970px) {
-    grid-template-columns: unset;
-    grid-template-rows: repeat(4, 1fr);
-  }
-
-  @media (min-width: 1300px) {
-    grid-template-columns: unset;
-    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
 }

src/modules/HowToSubmit/HowToSubmit.module.scss

@@ -17,7 +17,8 @@
   padding: calculateRem(10) 0;
   position: sticky;
   top: 0;
-  background: #fff;
+  z-index: 99;
+  background: #ffffff;
   border-bottom: 1px solid #f7f7f7;
 }
 
@@ -79,6 +80,9 @@ a {
   height: 64px;
   display: flex;
   align-items: center;
+  position: sticky;
+  bottom: 0;
+  background: #ffffff;
   justify-content: center;
   border-top: 1px solid #f7f7f7;
 

src/modules/RecentlyAdded/RecentlyAdded.module.scss

@@ -10,7 +10,7 @@
 .grid {
   display: grid;
   grid-auto-flow: column;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
   grid-gap: calculateRem(20);
   overflow-x: scroll;
   overflow-y: hidden;
@@ -19,18 +19,6 @@
 
   @media (min-width: $desktop) {
     // grid-auto-flow: row;
-    grid-template-rows: repeat(3, 1fr);
-    grid-template-columns: unset;
-    overflow-x: hidden;
-  }
-
-  @media (min-width: 970px) {
-    grid-template-columns: unset;
-    grid-template-rows: repeat(3, 1fr);
-  }
-
-  @media (min-width: 1300px) {
-    grid-template-columns: unset;
-    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
 }