Resizing topology & servers summary applied

src/app/components/topology-summary/topology-summary.component.html

@@ -1,11 +1,10 @@
 <div 
-    (mousedown)="dragWidget(event)" 
     class="summaryWrapper" 
     *ngIf="projectsStatistics" 
-    [ngStyle]="style"
+    [ngStyle]="style" 
     mwlResizable
     [validateResize]="validate"
-    [resizeEdges]="{ right: true, left: true}"
+    [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
     [enableGhostResize]="true"
     (resizeEnd)="onResizeEnd($event)">
     <div class="summaryHeader">
@@ -38,7 +37,9 @@
             </div>
         </div>
         <mat-divider class="divider"></mat-divider>
-        <div class="summaryContent">
+        <div
+            [ngStyle]="styleInside" 
+            class="summaryContent">
             <div class="nodeRow" *ngFor="let node of filteredNodes">
                 <div>
                     <svg *ngIf="node.status==='started'" width="10" height="10">

src/app/components/topology-summary/topology-summary.component.scss

@@ -36,7 +36,6 @@
 .summaryContent {
     margin-left: 5px;
     margin-right: 5px;
-    max-height: 180px;
     overflow: auto;
     scrollbar-color: darkgrey #263238;
     scrollbar-width: thin;
@@ -62,8 +61,9 @@
 }
 
 .divider {
-    margin: 5px;
-    width: 290px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    width: 100%;
     height: 2px;
 }
 

src/app/components/topology-summary/topology-summary.component.ts

@@ -24,6 +24,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
     @Output() closeTopologySummary = new EventEmitter<boolean>();
 
     public style: object = {};
+    public styleInside: object = { height: `180px` };
     private subscriptions: Subscription[] = [];
     projectsStatistics: ProjectStatistics;
     nodes: Node[] = [];
@@ -66,12 +67,11 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
     }
 
     validate(event: ResizeEvent): boolean {
-        const MIN_DIMENSIONS_PX: number = 50;
         if (
             event.rectangle.width &&
             event.rectangle.height &&
-            (event.rectangle.width < MIN_DIMENSIONS_PX ||
-            event.rectangle.height < MIN_DIMENSIONS_PX)
+            (event.rectangle.width < 290 ||
+            event.rectangle.height < 260)
         ) {
             return false;
         }
@@ -86,10 +86,10 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
             width: `${event.rectangle.width}px`,
             height: `${event.rectangle.height}px`
         };
-    }
 
-    dragWidget(event) {
-        console.log(event);
+        this.styleInside = {
+            height: `${event.rectangle.height - 220}px`
+        };
     }
 
     toogleTopologyVisibility(value: boolean) {