From 3f8a53b86c2998c432cd4509cfb3ff54c033fa97 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Thu, 15 Aug 2024 16:51:21 +0300
Subject: [PATCH] RED-9260 - Component Management UI

---
 .../component-definitions.component.html               |  8 +++++---
 .../component-definitions.component.scss               | 10 +++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

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 dbd2a0752..8ce3205f3 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
@@ -50,9 +50,11 @@
                                             icon="iqser:trash"
                                         ></iqser-circle-button>
                                     }
-                                    @if (selectedComponent?.id === component.id) {
-                                        <mat-icon class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
-                                    }
+                                    <mat-icon
+                                        [class.not-visible]="selectedComponent?.id !== component.id"
+                                        class="arrow-right"
+                                        svgIcon="red:arrow-right"
+                                    ></mat-icon>
                                 </div>
                             </div>
                         </div>
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 54a237251..85a10cd48 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
@@ -38,6 +38,10 @@
 
         .arrow-right {
             transform: scale(0.7);
+
+            &.not-visible {
+                visibility: hidden;
+            }
         }
     }
 }
@@ -45,6 +49,8 @@
 .content-container {
     background-color: var(--iqser-grey-6);
     height: 100vh;
+    display: flex;
+    flex-direction: column;
 
     .content-header {
         display: flex;
@@ -61,6 +67,7 @@
     }
 
     .content {
+        flex: 1;
         display: flex;
         gap: 20px;
         overflow: hidden;
@@ -68,7 +75,8 @@
         .components-list {
             flex: 1;
             background-color: var(--iqser-white);
-            width: 100%;
+            display: flex;
+            flex-direction: column;
 
             .header {
                 height: 30px;