fixed no scroll issue on an Asset page (#182)

stationmoney · Jun 9, 2023 · 0b0d808 · 0b0d808
1 parent e970088
commit 0b0d808
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/pages/wallet/AssetPage.module.scss b/src/pages/wallet/AssetPage.module.scss
@@ -24,19 +24,19 @@
 
 .chainlist {
   background-color: var(--card-bg-muted);
-  padding-top: 1.6rem;
+  padding-top: 25px;
   padding-inline: 10px;
   grid-area: list;
   display: grid;
   grid-template-areas: "title" "list";
   grid-template-rows: min-content auto;
   overflow-y: hidden;
+}
 
-  h3 {
-    padding-left: 10px;
-    grid-area: title;
-    margin-bottom: 10px;
-  }
+.chainlist__title {
+  grid-area: title;
+  margin-bottom: 10px;
+  padding-left: 10px;
 }
 
 .chainlist__list {

diff --git a/src/pages/wallet/AssetPage.tsx b/src/pages/wallet/AssetPage.tsx
@@ -84,8 +84,10 @@ const AssetPage = () => {
       </section>
       <section className={styles.chainlist}>
         {filteredBalances.length > 0 && (
-          <div>
-            <h3>{t("Chains")}</h3>
+          <>
+            <div className={styles.chainlist__title}>
+              <h3>{t("Chains")}</h3>
+            </div>
             <div className={styles.chainlist__list}>
               {filteredBalances
                 .sort((a, b) => parseInt(b.amount) - parseInt(a.amount))
@@ -102,11 +104,13 @@ const AssetPage = () => {
                   </div>
                 ))}
             </div>
-          </div>
+          </>
         )}
         {filteredUnsupportedBalances.length > 0 && (
-          <div>
-            <h3>{t("Unsupported Chains")}</h3>
+          <>
+            <div className={styles.chainlist__title}>
+              <h3>{t("Unsupported Chains")}</h3>
+            </div>
             <div className={styles.chainlist__list}>
               {filteredUnsupportedBalances
                 .sort((a, b) => parseInt(b.amount) - parseInt(a.amount))
@@ -124,7 +128,7 @@ const AssetPage = () => {
                   </div>
                 ))}
             </div>
-          </div>
+          </>
         )}
       </section>