Tidy up some styling

- Ensure autoscaller tiles take up full width when page is shrunk horizontally
- position of polling indicator on recent apps
- app-tile margin removed from top and added to bottom (fixes app/cf summary pages)
- added min height to latest metrics card to avoid vertical wibble on refresh

src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html

@@ -45,10 +45,10 @@
       <app-tile *ngIf="!policy.enabled">
         <app-card-app-instances></app-card-app-instances>
       </app-tile>
-      <app-tile *ngIf="policy.enabled" class="autoscaler-tab-tile-1of3">
+      <app-tile *ngIf="policy.enabled">
         <app-card-autoscaler-default [onUpdate]="updatePolicyPage"></app-card-autoscaler-default>
       </app-tile>
-      <app-tile *ngIf="policy.enabled" class="autoscaler-tab-tile-1of2">
+      <app-tile *ngIf="policy.enabled" class="autoscaler-tab__latest-metrics">
         <app-card-app-usage *ngIf="policy.scaling_rules.length == 0"></app-card-app-usage>
         <mat-card *ngIf="policy.scaling_rules.length > 0">
           <mat-card-header>
@@ -83,7 +83,7 @@
     </app-tile-group>
     <div *ngIf="appAutoscalerPolicy$ | async as policy" class="autoscaler-tab-policy">
       <app-tile-group *ngIf="policy.enabled">
-        <app-tile class="autoscaler-tab-policy-left">
+        <app-tile>
           <mat-card>
             <mat-card-header>
               <mat-card-title>Scaling Rules </mat-card-title>

src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.scss

@@ -15,6 +15,10 @@
   .autoscaler-tab-table-no-record {
     margin-top: .5em;
   }
+
+  &__latest-metrics {
+    min-height: 200px;
+  }
 }
 
 .app-metadata {
@@ -47,26 +51,6 @@ table {
   }
 }
 
-.autoscaler-tab-policy {
-  margin-bottom: 24px;
-}
-
-.autoscaler-tab-policy-left {
-  flex: 0 0 40%;
-}
-
-.autoscaler-tab-tile {
-  &-1of2 {
-    flex: 0 0 50%;
-  }
-  &-1of3 {
-    flex: 0 0 30%;
-  }
-  &-1of6 {
-    flex: 0 0 16.78%;
-  }
-}
-
 .autoscaler-tile-events {
   &__header {
     display: flex;

src/frontend/packages/core/src/shared/components/cards/card-cf-recent-apps/card-cf-recent-apps.component.scss

@@ -20,7 +20,7 @@
       margin-bottom: 0;
     }
 
-    button {
+    app-polling-indicator {
       margin-right: -10px;
       margin-top: -10px;
     }

src/frontend/packages/core/src/shared/components/tile/tile-group/tile-group.component.scss

@@ -30,8 +30,8 @@ app-tile-group {
     margin-left: -$tile-grid-gutter;
 
     app-tile {
-      $top-bottom: $tile-grid-gutter / 2;
-      padding: $top-bottom 0  $top-bottom $tile-grid-gutter;
+      // $top-bottom: $tile-grid-gutter / 2;
+      padding: 0 0 $tile-grid-gutter $tile-grid-gutter;
     }
   }
 }

src/frontend/packages/core/src/shared/components/tile/tile-group/tile-group.component.ts

@@ -1,7 +1,14 @@
-import { Component, OnInit, AfterContentInit, HostBinding, ContentChildren, QueryList, ViewEncapsulation } from '@angular/core';
-
-import { TileComponent} from '../tile/tile.component';
-import { Subscription } from 'rxjs';
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  HostBinding,
+  OnInit,
+  QueryList,
+  ViewEncapsulation,
+} from '@angular/core';
+
+import { TileComponent } from '../tile/tile.component';
 
 @Component({
   selector: 'app-tile-group',
@@ -23,7 +30,7 @@ export class TileGroupComponent implements OnInit, AfterContentInit {
 
   @ContentChildren(TileComponent) tiles: QueryList<TileComponent>;
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   ngAfterContentInit() {
     this.isSixColumn = (this.tiles.length === 6);