src/App.scss

@@ -70,6 +70,18 @@ input {
   font-family: inherit;
 }
 
+ul {
+  list-style-type: none; /* Removes bullet points */
+  margin: 0; /* Removes default margin */
+  padding: 0; /* Removes default padding */
+}
+
+li {
+  list-style-type: none; /* Removes the bullets */
+  margin: 0; /* Removes any default margin */
+  padding: 0; /* Removes any default padding */
+}
+
 // Shared styles for center content (Create, Sign, Verify)
 .files-wrapper {
   display: flex;

src/components/FileList/index.tsx

@@ -22,7 +22,6 @@ const FileList = ({
   const isActive = (file: CurrentUserFile) => file.id === currentFile.id
   return (
     <div className={styles.wrap}>
-      <div className={styles.container}>
       <ul className={styles.files}>
         {files.map((currentUserFile: CurrentUserFile) => (
           <li
@@ -32,9 +31,7 @@ const FileList = ({
           >
             <div className={styles.fileNumber}>{currentUserFile.id}</div>
             <div className={styles.fileInfo}>
-                <div className={styles.fileName}>
+              <div className={styles.fileName}>{currentUserFile.file.name}</div>
-                  {currentUserFile.file.name}
-                </div>
             </div>
 
             <div className={styles.fileVisual}>
@@ -45,7 +42,6 @@ const FileList = ({
           </li>
         ))}
       </ul>
-      </div>
       <Button variant="contained" fullWidth onClick={handleDownload}>
         {downloadLabel || 'Download Files'}
       </Button>

src/components/FileList/style.module.scss

@@ -1,12 +1,3 @@
-.container {
-  border-radius: 4px;
-  background: white;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 0px;
-}
-
 .filesPageContainer {
   width: 100%;
   display: grid;
@@ -15,18 +6,6 @@
   flex-grow: 1;
 }
 
-ul {
-  list-style-type: none; /* Removes bullet points */
-  margin: 0; /* Removes default margin */
-  padding: 0; /* Removes default padding */
-}
-
-li {
-  list-style-type: none; /* Removes the bullets */
-  margin: 0; /* Removes any default margin */
-  padding: 0; /* Removes any default padding */
-}
-
 .wrap {
   display: flex;
   flex-direction: column;
@@ -34,14 +13,16 @@ li {
 }
 
 .files {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+
   display: flex;
   flex-direction: column;
   width: 100%;
   grid-gap: 15px;
-  max-height: 350px;
+  overflow-y: auto;
-  overflow: auto;
+  overflow-x: none;
-  padding: 0 5px 0 0;
-  margin: 0 -5px 0 0;
 }
 
 .files::-webkit-scrollbar {