From 64dbd7d479bb4baebc43d72f04dbedf7a18d02a7 Mon Sep 17 00:00:00 2001
From: Eugene <eugene@nostrdev.com>
Date: Wed, 14 Aug 2024 12:36:51 +0300
Subject: [PATCH] feat(pdf-marking): integrates layouts

---
 src/components/PDFView/PdfMarking.tsx     | 50 +++++++++++++----------
 src/layouts/StickySideColumns.module.scss |  2 +-
 src/pages/sign/style.module.scss          |  4 +-
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/PDFView/PdfMarking.tsx b/src/components/PDFView/PdfMarking.tsx
index 1d4b522..02a9627 100644
--- a/src/components/PDFView/PdfMarking.tsx
+++ b/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}
diff --git a/src/layouts/StickySideColumns.module.scss b/src/layouts/StickySideColumns.module.scss
index 63c4314..fd99964 100644
--- a/src/layouts/StickySideColumns.module.scss
+++ b/src/layouts/StickySideColumns.module.scss
@@ -24,6 +24,6 @@
 }
 .content {
   max-width: 550px;
-  width: 100%;
+  width: 550px;
   margin: 0 auto;
 }
diff --git a/src/pages/sign/style.module.scss b/src/pages/sign/style.module.scss
index 10d03d3..1dbc6c5 100644
--- a/src/pages/sign/style.module.scss
+++ b/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;