From 3bfa4796b0d4bd8fed6b61286410f5933645b41b Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Thu, 29 Aug 2024 13:03:14 +0300
Subject: [PATCH] RED-9951: made document info scrollable & fixed paginator
 position.

---
 .../components/document-info/document-info.component.scss  | 7 ++-----
 .../components/file-workload/file-workload.component.scss  | 2 +-
 .../modules/file-preview/services/document-info.service.ts | 4 ++++
 .../components/paginator/paginator.component.scss          | 2 +-
 apps/red-ui/src/styles.scss                                | 6 +++---
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss
index c066e0ebf..d2b3853c0 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss
@@ -18,13 +18,10 @@
 
 .right-content {
     flex-direction: column;
+    height: calc(100% - 71px);
 
     @include common-mixins.scroll-bar;
-    overflow: hidden;
-
-    &:hover {
-        overflow: auto;
-    }
+    overflow-y: auto;
 
     &.has-scrollbar .section {
         padding-right: 13px;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
index 9d8652eb3..1867ae1ab 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
@@ -79,7 +79,7 @@
     .quick-navigation {
         height: 100%;
         border-right: 1px solid var(--iqser-separator);
-        min-width: var(--qiuck-navigation-width);
+        min-width: var(--quick-navigation-width);
         overflow: hidden;
         display: flex;
         flex-direction: column;
diff --git a/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts b/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts
index 63738433e..96e5dd0a9 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts
@@ -32,6 +32,10 @@ export class DocumentInfoService {
             },
             { allowSignalWrites: true },
         );
+
+        effect(() => {
+            document.body.style.setProperty('--quick-navigation-width', this.shown() ? '350px' : '61px');
+        });
     }
 
     fileAttributes$(fileId: string, dossierId: string, dossierTemplateId: string) {
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss
index 097e2a09d..558f1e724 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss
+++ b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss
@@ -14,7 +14,7 @@
     align-items: center;
 
     &.documine-pagination {
-        left: calc(100% - (var(--documine-viewer-width) / 2) - var(--qiuck-navigation-width));
+        left: calc(100% - (var(--documine-viewer-width) / 2) - var(--quick-navigation-width));
     }
 
     > div {
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index 9714aca6b..4872be031 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -165,12 +165,12 @@ body {
     --workload-width: 350px;
     --documine-workload-content-width: 287px;
     --structured-component-management-width: 40%;
-    --qiuck-navigation-width: 61px;
+    --quick-navigation-width: 61px;
     --iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
     --iqser-app-name-font-size: 13px;
     --iqser-logo-size: 28px;
     --documine-viewer-width: calc(
-        100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--qiuck-navigation-width) - 3px
+        100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--quick-navigation-width) - 3px
     );
     --viewer-height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
 }
@@ -189,7 +189,7 @@ body {
     width: var(--documine-viewer-width);
     height: var(--viewer-height);
     bottom: 0;
-    right: calc(var(--qiuck-navigation-width) + 3px);
+    right: calc(var(--quick-navigation-width) + 3px);
     position: absolute;
 
     &.document-info {