src/components/DrawPDFFields/index.tsx

@@ -16,7 +16,7 @@ import {
   Select
 } from '@mui/material'
 import styles from './style.module.scss'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import * as PDFJS from 'pdfjs-dist'
 import { ProfileMetadata, User, UserRole } from '../../types'
@@ -535,17 +535,14 @@ export const DrawPDFFields = (props: Props) => {
     <div className={styles.view}>
       {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
         return (
-          <>
+          <React.Fragment key={pdfFile.file.name}>
             <div
-              key={pdfFile.file.name}
               className={`${styles.fileWrapper} ${styles.scrollTarget}`}
               id={`file-${pdfFile.file.name}`}
             >
               {getPdfPages(pdfFile, pdfFileIndex)}
-            </div>
               {pdfFileIndex < pdfFiles.length - 1 && (
                 <Divider
-                key={pdfFile.file.name + `-divider`}
                   sx={{
                     fontSize: '12px',
                     color: 'rgba(0,0,0,0.15)'
@@ -554,7 +551,8 @@ export const DrawPDFFields = (props: Props) => {
                   File Separator
                 </Divider>
               )}
-          </>
+            </div>
+          </React.Fragment>
         )
       })}
 

src/pages/create/index.tsx

@@ -52,6 +52,7 @@ import {
 } from '../../utils'
 import { Container } from '../../components/Container'
 import styles from './style.module.scss'
+import fileListStyles from '../../components/FileList/style.module.scss'
 import { PdfFile } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
 import { Mark } from '../../types/mark.ts'
@@ -69,6 +70,8 @@ export const CreatePage = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const { uploadedFiles } = location.state || {}
+  const [currentFile, setCurrentFile] = useState<File>()
+  const isActive = (file: File) => file.name === currentFile?.name
 
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@@ -281,8 +284,8 @@ export const CreatePage = () => {
     }
   }
 
-  const handleFileClick = (name: string) => {
+  const handleFileClick = (id: string) => {
-    document.getElementById(name)?.scrollIntoView({ behavior: 'smooth' })
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
   }
 
   const handleRemoveFile = (
@@ -737,13 +740,16 @@ export const CreatePage = () => {
               <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
                 {selectedFiles.length > 0 &&
                   selectedFiles.map((file, index) => (
-                    <Button
+                    <div
                       key={index}
-                      className={styles.file}
+                      className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
-                      onClick={() => handleFileClick('file-' + file.name)}
+                      onClick={() => {
+                        handleFileClick('file-' + file.name)
+                        setCurrentFile(file)
+                      }}
                     >
                       <>
-                        <span>{file.name}</span>
+                        <span className={styles.fileName}>{file.name}</span>
                         <Button
                           variant="text"
                           onClick={(event) => handleRemoveFile(event, file)}
@@ -754,7 +760,7 @@ export const CreatePage = () => {
                           <FontAwesomeIcon icon={faTrash} />
                         </Button>
                       </>
-                    </Button>
+                    </div>
                   ))}
               </ol>
               <Button variant="contained" onClick={handleUploadButtonClick}>

src/pages/create/style.module.scss

@@ -24,10 +24,6 @@
     cursor: pointer;
     gap: 10px;
 
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
     &::before {
       content: counter(item) ' ';
       counter-increment: item;
@@ -113,3 +109,10 @@
     margin-left: 34px;
   }
 }
+
+.fileName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex-grow: 1;
+}