src/components/DrawPDFFields/style.module.scss

@@ -50,6 +50,7 @@
 .pdfImageWrapper {
   position: relative;
   user-select: none;
+  margin-bottom: 10px;
   
   &.drawing {
     cursor: crosshair;

src/components/FileList/index.tsx

@@ -17,20 +17,21 @@ const FileList = ({
 }: FileListProps) => {
   const isActive = (file: CurrentUserFile) => file.id === currentFile.id
   return (
-    <div className={styles.container}>
-      <div className={styles.files}></div>
-      <ul>
-        {files.map((file: CurrentUserFile) => (
-          <li
-            key={file.id}
-            className={`${styles.fileItem} ${isActive(file) && styles.active}`}
-            onClick={() => setCurrentFile(file)}
-          >
-            <span className={styles.fileNumber}>{file.id}</span>
-            <span className={styles.fileName}>{file.filename}</span>
-          </li>
-        ))}
-      </ul>
+    <div className={styles.wrap}>
+      <div className={styles.container}>
+        <ul className={styles.files}>
+          {files.map((file: CurrentUserFile) => (
+            <li
+              key={file.id}
+              className={`${styles.fileItem} ${isActive(file) && styles.active}`}
+              onClick={() => setCurrentFile(file)}
+            >
+              <span className={styles.fileNumber}>{file.id}</span>
+              <span className={styles.fileName}>{file.filename}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
       <Button variant="contained" fullWidth onClick={handleDownload}>
         Download Files
       </Button>

src/components/FileList/style.module.scss

@@ -7,6 +7,29 @@
   grid-gap: 0px;
 }
 
+.filesPageContainer {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 30px;
+  flex-grow: 1;
+}
+
+ul {
+  list-style-type: none; /* Removes bullet points */
+  margin: 0;             /* Removes default margin */
+  padding: 0;            /* Removes default padding */
+}
+
+
+.wrap {
+  position: sticky;
+  top: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
 .files {
   display: flex;
   flex-direction: column;
@@ -33,6 +56,10 @@
   cursor: grab;
 }
 
+.wrap {
+  margin-top: 5px;
+}
+
 .fileItem {
   transition: ease 0.2s;
   display: flex;
@@ -49,6 +76,7 @@
   font-size: 16px;
   font-weight: 500;
 
+
   &.active {
     background: #4c82a3;
     color: white;

src/components/PDFView/PdfPageItem.tsx

@@ -34,9 +34,7 @@ const PdfPageItem = ({
     <div
       className={styles.pdfImageWrapper}
       style={{
-        border: '1px solid #c4c4c4',
-        marginBottom: '10px',
-        marginTop: '10px'
+        border: '1px solid #c4c4c4'
       }}
     >
       <img draggable="false" src={page.image} style={{ width: '100%' }} />

src/components/PDFView/index.tsx

@@ -42,9 +42,9 @@ const PdfView = ({
     )
   }
   const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
-    !(index !== files.length - 1)
+    index !== files.length - 1
   return (
-    <Box sx={{ width: '100%' }}>
+    <>
       {files.map((currentUserFile, index, arr) => {
         const { hash, pdfFile, filename, id } = currentUserFile
         if (!hash) return
@@ -65,7 +65,7 @@ const PdfView = ({
           </div>
         )
       })}
-    </Box>
+    </>
   )
 }
 

src/components/PDFView/style.module.scss

@@ -19,6 +19,7 @@
   display: flex;
   width: 100%;
   flex-direction: column;
+
 }
 
 .pdfView {
@@ -26,4 +27,5 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
+  gap: 10px;
 }