feat(pdf-marking): integrates layouts

src/components/PDFView/PdfMarking.tsx

@@ -13,6 +13,7 @@ import signPageStyles from '../../pages/sign/style.module.scss'
 import styles from './style.module.scss'
 import { CurrentUserFile } from '../../types/file.ts'
 import FileList from '../FileList'
+import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 
 interface PdfMarkingProps {
   files: CurrentUserFile[]
@@ -112,30 +113,35 @@ const PdfMarking = (props: PdfMarkingProps) => {
   return (
     <>
       <Container className={signPageStyles.container}>
-        <div className={styles.container}>
-          <div>
-            {currentFile !== null && (
-              <FileList
-                files={files}
-                currentFile={currentFile}
-                setCurrentFile={setCurrentFile}
-                handleDownload={handleDownload}
-              />
+        <StickySideColumns
+          left={
+            <div>
+              {currentFile !== null && (
+                <FileList
+                  files={files}
+                  currentFile={currentFile}
+                  setCurrentFile={setCurrentFile}
+                  handleDownload={handleDownload}
+                />
+              )}
+            </div>
+          }
+        >
+          <div className={styles.container}>
+            {currentUserMarks?.length > 0 && (
+              <div className={styles.pdfView}>
+                <PdfView
+                  currentFile={currentFile}
+                  files={files}
+                  handleMarkClick={handleMarkClick}
+                  selectedMarkValue={selectedMarkValue}
+                  selectedMark={selectedMark}
+                  currentUserMarks={currentUserMarks}
+                />
+              </div>
             )}
           </div>
-          {currentUserMarks?.length > 0 && (
-            <div className={styles.pdfView}>
-              <PdfView
-                currentFile={currentFile}
-                files={files}
-                handleMarkClick={handleMarkClick}
-                selectedMarkValue={selectedMarkValue}
-                selectedMark={selectedMark}
-                currentUserMarks={currentUserMarks}
-              />
-            </div>
-          )}
-        </div>
+        </StickySideColumns>
         {selectedMark !== null && (
           <MarkFormField
             handleSubmit={handleSubmit}

src/layouts/StickySideColumns.module.scss

@@ -24,6 +24,6 @@
 }
 .content {
   max-width: 550px;
-  width: 100%;
+  width: 550px;
   margin: 0 auto;
 }

src/pages/sign/style.module.scss

@@ -2,8 +2,8 @@
 
 .container {
   color: $text-color;
-  width: 550px;
-  max-width: 550px;
+  //width: 550px;
+  //max-width: 550px;
 
   .inputBlock {
     position: relative;