Merge pull request #50 from raw-letisso/issue-1887

UI breaks for storages on some resolutions #1887

Author: steve-todorov

src/app/app.component.scss

@@ -280,4 +280,4 @@ a:hover {
       margin-bottom: 24px;
     }
   }
-}
+}

src/app/modules/storage-management/pages/browse-storages/components/list-repositories/list-repositories.component.html

@@ -1,4 +1,4 @@
-<div style="width: 100%; height: 73vh; position:relative; overflow: hidden;" fxLayout="column">
+<div style="width: 100%; height: 100%; position:relative; overflow: hidden;" fxLayout="column">
     <table mat-table [dataSource]="repositoriesSource" style="width: 100%;">
         <ng-container *ngFor="let column of repositoryColumns;">
             <ng-container [matColumnDef]="column">

src/app/modules/storage-management/pages/browse-storages/components/list-repositories/list-repositories.component.scss

@@ -1,5 +1,5 @@
 .overlay {
-  height: calc(73vh - 10rem);
+  height: 100%;
   width: 100%;
   background: rgba(29, 41, 53, 0.65);
   z-index: 99;
@@ -21,4 +21,4 @@
   .mat-header-cell {
     padding-right: 0px;
   }
-}
+}

src/app/modules/storage-management/pages/browse-storages/components/list-storages/list-storages.component.html

@@ -1,14 +1,14 @@
-<div style="position:relative; height: 73vh; ">
+<div style="position:relative; height: 100%; ">
 
     <table class="mat-table" style="width: 100%;">
         <thead>
             <tr class="mat-header-row">
                 <th class="mat-header-cell cdk-column-repository mat-column-repository mat-table-sticky ng-star-inserted"
-                    style="width: 75%;">
+                    style="width: 50%;">
                     Storage
                 </th>
                 <th class="mat-header-cell cdk-column-repository mat-column-repository mat-table-sticky ng-star-inserted"
-                    style="width: 25%; text-align: right; font-size: 18px;">
+                    style="width: 50%; text-align: right; font-size: 18px;">
                     <a (click)="toggleStorageSearch()"
                        [class.active]="(showSearch$ | async)"
                        style="margin-right: 10px;">

src/app/modules/storage-management/pages/browse-storages/components/list-storages/list-storages.component.scss

@@ -18,7 +18,7 @@
 }
 
 ::ng-deep mat-list-item {
-  height: 40px !important;
+  height: 100% !important;
 
   .list-row {
     .link {