feat: scrollable mask lists in new-chat page

app/components/new-chat.module.scss

@@ -54,13 +54,13 @@
 
   .actions {
     margin-top: 5vh;
-    margin-bottom: 5vh;
+    margin-bottom: 2vh;
     animation: slide-in ease 0.45s;
     display: flex;
     justify-content: center;
+    font-size: 12px;
 
-    .more {
-      font-size: 12px;
+    .skip {
       margin-left: 10px;
     }
   }
@@ -68,16 +68,26 @@
   .masks {
     flex-grow: 1;
     width: 100%;
-    overflow: hidden;
+    overflow: auto;
     align-items: center;
     padding-top: 20px;
 
+    $linear: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 1),
+      rgba(0, 0, 0, 0)
+    );
+
+    -webkit-mask-image: $linear;
+    mask-image: $linear;
+
     animation: slide-in ease 0.5s;
 
     .mask-row {
-      margin-bottom: 10px;
       display: flex;
-      justify-content: center;
+      // justify-content: center;
+      margin-bottom: 10px;
 
       @for $i from 1 to 10 {
         &:nth-child(#{$i * 2}) {