From 6e115038b02dc2b4c7961e8d76799a630dce7bdd Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 12 Aug 2024 20:54:30 +0300
Subject: [PATCH] RED-9260 - Component Management UI

---
 .../component-definitions.component.html                  | 2 +-
 .../component-definitions.component.scss                  | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
index c6ae97bdf..dbd2a0752 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
@@ -27,7 +27,7 @@
                     </div>
                 </div>
 
-                <div (cdkDropListDropped)="drop($event)" cdkDropList>
+                <div (cdkDropListDropped)="drop($event)" cdkDropList class="list-content">
                     @for (component of componentDefinitions; track component) {
                         <div
                             class="list-item"
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
index b54da356d..54a237251 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
@@ -44,6 +44,7 @@
 
 .content-container {
     background-color: var(--iqser-grey-6);
+    height: 100vh;
 
     .content-header {
         display: flex;
@@ -62,6 +63,7 @@
     .content {
         display: flex;
         gap: 20px;
+        overflow: hidden;
 
         .components-list {
             flex: 1;
@@ -72,6 +74,12 @@
                 height: 30px;
             }
 
+            .list-content {
+                overflow-y: auto;
+                height: calc(100vh - 30px);
+                outline: none;
+            }
+
             .list-item {
                 height: 80px;
                 transition: background 0.3s ease;