Bugfix/small UI fixes (#159)

* make space between elements smaller

* fix open icon in elements search autocomplete

Author: larisaVasile

core/libs/sidebar/src/lib/draggable-element/draggable-element.component.scss

@@ -14,4 +14,5 @@
 :host {
   display: block;
   cursor: move;
+  margin-top: 16px;
 }

core/libs/sidebar/src/lib/sidebar-samm-elements/sidebar-samm-elements.component.scss

@@ -38,10 +38,6 @@
 }
 
 .content {
-  display: grid;
-  gap: 20px;
-  margin-top: 28px;
-  grid-template-columns: 100%;
   width: 100%;
   height: calc(100% - 75px);
   overflow-x: visible;

core/libs/utils/src/lib/components/elements-search/elements-search.component.html

@@ -20,15 +20,19 @@
   <mat-autocomplete class="search-autocomplete" #auto="matAutocomplete">
     <ng-container *ngFor="let element of elements">
       <mat-option class="list-option" *ngIf="element | modelElementParser as parsedElement" (click)="openElement(element)">
-        <ame-element
-          [type]="sammElements[parsedElement.type]"
-          [name]="parsedElement.element.name"
-          [description]="parsedElement.element.aspectModelUrn"
-          [disabledTooltipDescriptionLength]="100"
-          [disabledTooltipNameLength]="60"
-          size="medium"
-        ></ame-element>
-        <mat-icon *ngIf="element.isExternalReference() && !element.isPredefined()">open_in_new</mat-icon>
+        <div [class.has-external-element]="element.isExternalReference() && !element.isPredefined()">
+          <ame-element
+            [type]="sammElements[parsedElement.type]"
+            [name]="parsedElement.element.name"
+            [description]="parsedElement.element.aspectModelUrn"
+            [disabledTooltipDescriptionLength]="100"
+            [disabledTooltipNameLength]="60"
+            size="medium"
+          ></ame-element>
+          <div class="align-self-center">
+            <mat-icon *ngIf="element.isExternalReference() && !element.isPredefined()" class="open-icon">open_in_new</mat-icon>
+          </div>
+        </div>
       </mat-option>
     </ng-container>
   </mat-autocomplete>

core/libs/utils/src/lib/components/elements-search/elements-search.component.scss

@@ -70,3 +70,17 @@ $top: 100px;
 .list-option {
   display: block !important;
 }
+.open-icon {
+  margin-top: 10px;
+  color: #686868;
+}
+
+.has-external-element {
+  display: grid;
+  justify-content: space-between;
+  grid-template-columns: 535px 65px;
+}
+
+.align-self-center {
+  align-self: center;
+}