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,7 +113,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
   return (
     <>
       <Container className={signPageStyles.container}>
-        <div className={styles.container}>
+        <StickySideColumns
+          left={
             <div>
               {currentFile !== null && (
                 <FileList
@@ -123,6 +125,9 @@ const PdfMarking = (props: PdfMarkingProps) => {
                 />
               )}
             </div>
+          }
+        >
+          <div className={styles.container}>
             {currentUserMarks?.length > 0 && (
               <div className={styles.pdfView}>
                 <PdfView
@@ -136,6 +141,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
               </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;