Optimizing TV details page

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-information-panel/tv-information-panel.component.html

@@ -1,63 +1,68 @@
+<div class="left-panel-details">
     <div>
+        <div class="rating medium-font">
             <span *ngIf="tv.rating">
-        <img style="width: 4em;" src="{{baseUrl}}/images/tvm-logo.png"> {{tv.rating}}/10
+                <img class="rating-small" src="{{baseUrl}}/images/tvm-logo.png"> {{tv.rating}}/10
             </span>
             <span *ngIf="ratings?.score && ratings?.class">
                 <img class="rating-small" src="{{baseUrl}}/images/{{ratings.class === 'rotten' ? 'rotten-rotten.svg' : 'rotten-fresh.svg'}}"> {{ratings.score}}%
             </span>
-
-    <div *ngIf="streams?.length > 0">
+        </div>
+        <div *ngIf="streams?.length > 0" class="streaming-on-container">
             <hr>
-        <strong>{{'MediaDetails.StreamingOn' | translate }}:</strong>
+            <div class="streaming-on-content">
+                <span class="label">{{'MediaDetails.StreamingOn' | translate }}:</span>
                 <div>
                     <span *ngFor="let stream of streams">
                         <img class="stream-small" [matTooltip]="stream.streamingProvider" src="https://image.tmdb.org/t/p/original{{stream.logo}}">
                     </span>
                 </div>
             </div>
+        </div>
         <hr>
         <div *ngIf="tv.status">
-        <strong>{{'MediaDetails.Status' | translate }}:</strong>
+            <span class="label">{{'MediaDetails.Status' | translate }}:</span>
                 {{tv.status}}
         </div>
-    <strong>First Aired:</strong>
+        <span class="label">First Aired:</span>
             {{tv.firstAired | date: 'mediumDate'}}
     </div>
 
     <div *ngIf="seasonCount">
-    <strong>Seasons:</strong>
+        <span class="label">Seasons:</span>
             {{seasonCount}}
     </div>
     <div *ngIf="totalEpisodes">
-    <strong>Episodes:</strong>
+        <span class="label">Episodes:</span>
             {{totalEpisodes}}
     </div>
 
     <div *ngIf="advancedOptions && request?.rootPathOverrideTitle">
-    <strong>{{'MediaDetails.RootFolderOverride' | translate }}:</strong>
+        <span class="label">{{'MediaDetails.RootFolderOverride' | translate }}:</span>
         <div>{{request.rootPathOverrideTitle}}</div>
     </div>
     <div *ngIf="advancedOptions && request?.qualityOverrideTitle">
-    <strong>{{'MediaDetails.QualityOverride' | translate }}:</strong>
+        <span class="label">{{'MediaDetails.QualityOverride' | translate }}:</span>
         <div>{{request.qualityOverrideTitle}}</div>
     </div>
 
     <div>
-    <strong>{{'MediaDetails.Runtime' | translate }}:</strong>
+        <span class="label">{{'MediaDetails.Runtime' | translate }}:</span>
             {{'MediaDetails.Minutes' | translate:{ runtime: tv.runtime} }}
     </div>
 
     <div *ngIf="tv.network">
-    <strong>Network:</strong>
+        <span class="label">Network:</span>
             {{tv.network.name}}
     </div>
 
     <div *ngIf="tv.genre">
-    <strong>{{'MediaDetails.Genres' | translate }}:</strong>
+        <span class="label">{{'MediaDetails.Genres' | translate }}:</span>
         <div>
             <span *ngFor="let genre of tv.genre">
                 {{genre}} |
             </span>
         </div>
     </div>
+</div>
 

src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html

@@ -67,8 +67,8 @@
 
                     <div class="row">
                         <div class="col-12 col-md-2">
-                            <mat-card class="mat-elevation-z8">
-                                <mat-card-content class="medium-font">
+                            <mat-card class="mat-elevation-z8 spacing-below">
+                                <mat-card-content>
                                     <tv-information-panel [tv]="tv" [request]="showRequest"
                                         [advancedOptions]="showAdvanced"></tv-information-panel>
                                 </mat-card-content>

src/Ombi/ClientApp/src/app/media-details/media-details.component.scss

@@ -288,6 +288,18 @@
     font-weight:500;
 }
 
+.left-panel-details .streaming-on-content{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow:row wrap;
+}
+
+.left-panel-details .streaming-on-content .label{
+    white-space:nowrap;
+    padding-right:10px;
+}
+
 .left-panel-details{
     font-weight:100;
 }
@@ -314,6 +326,11 @@
     padding:2px 1.5em;;
     width:170px;
     margin-top:10px;
+    margin-left:10px;
+}
+
+.media-row .mat-raised-button:first-child{
+    margin-left:0px;
 }
 
 @media (max-width:500px){