update responsive design & bugfixes

frontend/src/app/components/home/browse/categories/categories.component.scss

@@ -102,6 +102,7 @@ section {
   overflow-y: auto;
   overflow-x: hidden;
   height: 50%;
+  padding-bottom: 24px;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html

@@ -1,4 +1,9 @@
 <section
+  [ngClass]="{
+    fullVh: !screenWidth
+  }"
+>
+  <div
     class="movie-banner"
     [ngStyle]="{
       'background-image':
@@ -9,18 +14,35 @@
         '/' +
         currentMovie[0]?.file_name +
         '_1080p.jpg' +
-      ')'
+        ')',
     }"
     [ngClass]="{
-    fullVh: !screenWidth
+      fullVhBanner: !screenWidth
+    }"
+  ></div>
+  @if (currentMovie.length > 0) {
+  <div
+    class="content"
+    [ngClass]="{
+      fullVhContent: !screenWidth
     }"
   >
-  @if (currentMovie.length > 0) {
-  <div class="content">
     <div class="title">{{ currentMovie[0].title }}</div>
-    <div class="description">
+    <div
+      class="description"
+      [ngClass]="{
+        fullVhDescription: !screenWidth
+      }"
+    >
       {{ currentMovie[0].description }}
     </div>
+    <div class="buttons">
+      <app-btn-small
+        *ngIf="!screenWidth"
+        [imgPath]="'back'"
+        [imgRadius]="'24px'"
+        (click)="backToCategory()"
+      ></app-btn-small>
       <app-btn-large
         [value]="'Play'"
         [imgPath]="'play'"
@@ -37,5 +59,6 @@
         "
       ></app-btn-large>
     </div>
+  </div>
   }
 </section>

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss

@@ -2,6 +2,10 @@
 
 section {
   height: 400px;
+}
+
+.movie-banner {
+  height: 400px;
   position: relative;
   overflow: hidden;
   img {
@@ -27,15 +31,8 @@ section {
   }
 }
 
-.fullVh {
-  height: 100vh;
-  &::after {
-    height: 0%;
-  }
-}
-
 .content {
-  position: relative;
+  position: absolute;
   width: 50%;
   top: 120px;
   left: 96px;
@@ -61,10 +58,32 @@ section {
   text-shadow: 1px 1px 2px $black;
 }
 
-app-btn-large {
+.fullVh {
+  height: 100vh;
+}
+
+.fullVhBanner {
+  height: 200px;
+}
+
+.fullVhContent {
+  width: calc(100% - 48px);
+  top: 200px;
+  left: 24px;
+}
+
+.fullVhDescription {
+  max-height: 250px;
+}
+
+.buttons {
   position: absolute;
-  bottom: -60px;
+  bottom: -70px;
   left: 0;
+  display: flex;
+  justify-content: left;
+  width: 100%;
+  gap: 12px;
 }
 
 .movie-banner {

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts

@@ -10,11 +10,12 @@ import {
 import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component';
 import { MovieService } from '../../../../services/movie.service';
 import { environment } from '../../../../environments/environment';
+import { BtnSmallComponent } from '../../../../shared/components/buttons/btn-small/btn-small.component';
 
 @Component({
   selector: 'app-hero-banner',
   standalone: true,
-  imports: [CommonModule, BtnLargeComponent],
+  imports: [CommonModule, BtnLargeComponent, BtnSmallComponent],
   templateUrl: './hero-banner.component.html',
   styleUrl: './hero-banner.component.scss',
 })
@@ -59,4 +60,8 @@ export class HeroBannerComponent {
   playMovieId(videoPath: string) {
     this.playMovie.emit(videoPath);
   }
+
+  backToCategory() {
+    window.location.href = '/browse/';
+  }
 }

frontend/src/app/shared/components/header/header.component.html

@@ -1,6 +1,6 @@
 <header>
   @if (browse) {
-  <div class="logo" routerLink="/browse/">
+  <div class="logo" (click)="reloadPage()">
     <img src="./../../../../assets/img/logo_ci.svg" alt="" />
   </div>
   <div class="btn">

frontend/src/app/shared/components/header/header.component.ts

@@ -14,6 +14,10 @@ export class HeaderComponent {
 
   constructor(private router: Router) {}
 
+  reloadPage() {
+    window.location.href = '/browse/';
+  }
+
   logout() {
     localStorage.clear();
     sessionStorage.clear();