From 56a2cbf0e23e44eab702f721087fe31e1dc0b0ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 3 Dec 2020 22:42:01 +0200
Subject: [PATCH] Right container scroll

---
 .../dictionary-listing-screen.component.scss  |  8 ++++++++
 .../project-listing-screen.component.scss     |  4 ++++
 .../project-overview-screen.component.ts      |  1 -
 apps/red-ui/src/assets/styles/red-mixins.scss | 20 +++++++++++++++++++
 .../src/assets/styles/red-page-layout.scss    |  8 ++++++--
 apps/red-ui/src/assets/styles/red-tables.scss | 18 +----------------
 yarn.lock                                     |  2 +-
 7 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
index 455cbec20..2157fb3c0 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
@@ -58,6 +58,14 @@ redaction-table-col-name::ng-deep {
     min-width: 353px;
     justify-content: center;
     padding: 50px 0;
+
+    redaction-simple-doughnut-chart::ng-deep {
+        overflow-x: hidden;
+
+        > div {
+            min-width: 353px;
+        }
+    }
 }
 
 .actions {
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index a234f7422..026263b34 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -32,4 +32,8 @@
     display: flex;
     width: 466px;
     min-width: 466px;
+
+    redaction-project-listing-details {
+        min-width: 466px;
+    }
 }
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index da1225915..559f69773 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -38,7 +38,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     public needsWorkFilters: FilterModel[];
     public collapsedDetails = false;
     public searchForm: FormGroup;
-    showFileDrop: boolean;
 
     displayedFiles: FileStatusWrapper[] = [];
 
diff --git a/apps/red-ui/src/assets/styles/red-mixins.scss b/apps/red-ui/src/assets/styles/red-mixins.scss
index 83dc2a6c9..d10770e11 100644
--- a/apps/red-ui/src/assets/styles/red-mixins.scss
+++ b/apps/red-ui/src/assets/styles/red-mixins.scss
@@ -21,6 +21,26 @@
     }
 }
 
+@mixin scroll-bar {
+    scrollbar-color: $grey-5 $grey-2;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 11px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: $grey-2;
+        //background: red;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: $grey-5;
+    }
+}
+
 @mixin inset-shadow {
     box-shadow: inset 0 4px 3px -2px $grey-4;
 }
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 47e540a66..37104d388 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -79,11 +79,15 @@ body {
         box-sizing: border-box;
         background: $white;
         z-index: 1;
-        overflow-y: scroll;
-        @include no-scroll-bar();
+        overflow: hidden;
         @include inset-shadow;
         transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
 
+        &:hover {
+            overflow-y: auto;
+            @include scroll-bar;
+        }
+
         .collapsed-wrapper {
             display: none;
         }
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index 455e298cd..33076b503 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -28,23 +28,7 @@
 
     &:hover {
         overflow-y: scroll;
-
-        scrollbar-color: $grey-5 $grey-2;
-        scrollbar-width: thin;
-
-        &::-webkit-scrollbar {
-            width: 11px;
-        }
-
-        /* Track */
-        &::-webkit-scrollbar-track {
-            background: $grey-2;
-        }
-
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-            background: $grey-5;
-        }
+        @include scroll-bar;
 
         .table-item {
             .action-buttons {
diff --git a/yarn.lock b/yarn.lock
index 05d398df8..b5918a54b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8476,7 +8476,7 @@ ngx-color-picker@^10.1.0:
   dependencies:
     tslib "^2.0.0"
 
-ngx-dropzone@^2.3.0:
+ngx-dropzone@^2.2.2:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/ngx-dropzone/-/ngx-dropzone-2.3.0.tgz#fb34bceb0d8ad3c00c314b957d095018d15c5fe9"
   integrity sha512-Mhsu6MW1yJRxLPRPbwal7y18trokU9josTD8GDb8wFRmaCd/N+dJeMDXn0XsxtDhlZ7vWqbpEr9k0ej4Na3v8Q==