Fix for availability on the discover page (mobile display).

src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html

@@ -6,7 +6,7 @@
             {{RequestType[result.type] | humanize}}
         </div>
         <div class="{{getStatusClass()}} top-right">
-            <span>{{getAvailbilityStatus()}}</span>
+            <span class="indicator"></span><span class="indicator-text">{{getAvailbilityStatus()}}</span>
         </div>
     </div>
         <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"

src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss

@@ -159,17 +159,27 @@ small {
 } 
 
 /* common */
-.top-right span {
+.top-right{
+  display:flex;
+}
+
+.top-right span.indicator, span.indicator-text {
   display: none;
   background-color: transparent;
   color: #fff;
   text-shadow: 0 1px 1px rgba(0,0,0,.2);
   text-align: right;
   font-size: 14px;
+}
+
+.top-right span.indicator{
+  padding-right: 0px;
+}
+.top-right span.indicator-text{
   padding-right: 1em;
 }
 
-.top-right span:before{
+.top-right span.indicator:before{
   content: '';
   width: 10px;
   height: 10px;
@@ -179,29 +189,29 @@ small {
   margin-right:5px;
 }
 
-.top-right.available span{
+.top-right.available span.indicator, span.indicator-text{
   display:block;
 }
 
-.top-right.available span:before{
+.top-right.available span.indicator:before{
   display: inline-block;
   background-color: #1DE9B6;
 }
 
-.top-right.approved span {
+.top-right.approved span.indicator, span.indicator-text {
   display: block;
 }
 
-.top-right.approved span:before{
+.top-right.approved span.indicator:before{
   display: inline-block;
   background-color: #ff5722;
 }
 
-.top-right.requested span {
+.top-right.requested span.indicator, span.indicator-text {
   display: block;
 }
 
-.top-right.requested span:before{
+.top-right.requested span.indicator:before{
   display: inline-block;
   background-color: #ffd740;
 }
@@ -212,4 +222,18 @@ small {
 
 a.poster-overlay:hover{
   text-decoration: none;
+}
+
+@media screen and (max-width: 400px){
+  .ellipsis{
+    display:none;
+  }
+
+  .top-right span.indicator-text{
+    display:none;
+  }
+
+  .top-right span.indicator{
+    padding-right:1em;
+  }
 }

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss

@@ -9,4 +9,9 @@ h2{
     margin-top:40px;
     margin-left:40px;
     font-size: 24px;
+}
+
+::ng-deep .p-carousel-item{
+    min-height:290px;
+    max-height:290px;
 }