* Improved the responsiveness for mobile views on the detail pages

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

@@ -9,12 +9,12 @@
     <section id="info-wrapper">
         <div class="small-middle-container">
 
-            <div class="row">
+            <div class="row justify-content-center justify-content-sm-start">
 
                 <media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
 
                 <!--Next to poster-->
-                <div class="col-12 col-lg-3 col-xl-3 media-row">
+                <div class="col-12 col-lg-2 col-xl-3 media-row">
 
                     <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
                         [instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>

src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html

@@ -7,12 +7,12 @@
             <div class="container">
                 <div class="row">
                     <div
-                        class="col-xl-10 col-lg-11 offset-xl-2 offset-lg-1 col-md-8 col-sm-7 col-8 offset-md-4 offset-sm-5 offset-4">
+                        class="col-xl-11 col-lg-8 offset-xl-1 offset-lg-4 col-md-8 col-sm-7 col-12 offset-md-4 offset-sm-5 mobile-top-text">
-                        <h1>{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
+                        <h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
                             ({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
                         </h1>
 
-                        <h5 class="tagline grey-text">{{tagline}}</h5>
+                        <h2 class="tagline grey-text">{{tagline}}</h2>
                     </div>
                 </div>
             </div>

src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.scss

@@ -0,0 +1,3 @@
+.large-text {
+    font: 500 40px/30px Roboto, "Helvetica Neue", sans-serif;
+}

src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.ts

@@ -4,6 +4,7 @@ import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
 @Component({
     selector: "top-banner",
     templateUrl: "./top-banner.component.html",
+    styleUrls: ["top-banner.component.scss"]
 })
 export class TopBannerComponent {
     

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

@@ -19,13 +19,13 @@
 
             <section id="info-wrapper">
                 <div class="small-middle-container">
-                    <div class="row">
+                    <div class="row justify-content-center justify-content-sm-start">
 
                         <media-poster [posterPath]="tv.images?.medium"></media-poster>
 
 
                         <!--Next to poster-->
-                        <div class="col-12 col-lg-3 col-xl-3 media-row">
+                        <div class="col-12 col-lg-2 col-xl-3 media-row">
 
                             <social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer"
                                 (openTrailer)="openDialog()" [imdbId]="tv.imdbId" [available]="tv.available || tv.partlyAvailable"

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

@@ -5,13 +5,10 @@
     h1 {
         font-size: 1.5rem;
     }
-    .mobile-poster {
+    .mobile-top-text {
-        display: block;
+        margin-bottom: 170px;
-        position: absolute;
-        width: 70px;
-        left: 12px;
-        bottom: 2px;
     }
+
     #info-wrapper .sidebar-poster {
         margin-top: -126px !important;
     }

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -24,7 +24,7 @@ export enum SearchFilterType {
 })
 export class MyNavComponent implements OnInit {
 
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe([Breakpoints.Small, Breakpoints.Handset, Breakpoints.XSmall])
     .pipe(
       map(result => result.matches)
     );