Right container scroll

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 {

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;
+    }
 }

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[] = [];
 

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;
 }

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;
         }

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 {

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==