refactor: entity changes for api-dashboard (#978)

Author: anandtiwary

projects/observability/src/shared/components/entity-renderer/entity-renderer.component.scss

@@ -2,6 +2,10 @@
 @import 'font';
 
 .ht-entity-renderer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
   .name-with-icon {
     display: flex;
     flex-direction: row;

projects/observability/src/shared/components/entity-renderer/entity-renderer.component.ts

@@ -20,13 +20,13 @@ import { EntityNavigationService } from '../../services/navigation/entity/entity
     </div>
 
     <ng-template #nameWithLinkTemplate>
-      <ht-link [paramsOrUrl]="this.navigationParams">
+      <ht-link [paramsOrUrl]="this.navigationParams" class="fill-container">
         <ng-container *ngTemplateOutlet="nameTemplate"></ng-container>
       </ht-link>
     </ng-template>
 
     <ng-template #nameTemplate>
-      <div class="name-with-icon">
+      <div class="name-with-icon fill-container">
         <ht-icon
           [icon]="this.entityIconType"
           class="icon"

projects/observability/src/shared/components/gauge-list/gauge-list.component.scss

@@ -12,7 +12,7 @@
   align-items: center;
 
   &.with-label {
-    grid-template-columns: minmax(60px, auto) minmax(60px, 1fr) max-content;
+    grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) max-content;
   }
 
   .border-top {
@@ -22,7 +22,7 @@
   }
 
   .label {
-    @include body-1-medium($gray-7);
+    @include body-1-medium($gray-5);
     @include ellipsis-overflow;
   }
 

projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.scss

@@ -11,7 +11,7 @@
     box-shadow: 0px 1px 3px rgba(63, 71, 74, 0.16), 0px 2px 2px rgba(63, 71, 74, 0.12),
       0px 0px 2px rgba(63, 71, 74, 0.16);
     margin-top: 4px;
-    padding: 0px 8px;
+    padding: 0px 24px;
   }
 }