update responsive design

frontend/src/app/components/home/browse/browse.component.html

@@ -3,16 +3,25 @@
   <!-- If at least one film has been uploaded -->
   @if (playMovie === "") {
   <app-header [browse]="true"></app-header>
-  @if (this.checkScreenWidth()) {
+  <!-- Hero Banner -->
   <app-hero-banner
+    *ngIf="
+      currentMovie.length === 1 ||
+      (this.checkScreenWidth() && currentMovie.length > 1)
+    "
+    [screenWidth]="checkScreenWidth()"
     [currentMovie]="currentMovie"
     (playMovie)="playVideo($event)"
     (movieIsUploadedChange)="onMovieIsUploadedChange($event)"
   ></app-hero-banner>
-  } @else {
+  <!-- Spacer -->
-  <div class="spacer"></div>
+  <div *ngIf="!this.checkScreenWidth()" class="spacer"></div>
-  }
+  <!-- Movie Categories -->
   <app-categories
+    *ngIf="
+      this.checkScreenWidth() ||
+      (!this.checkScreenWidth() && currentMovie.length === 0)
+    "
     [movies]="movies"
     [currentMovie]="currentMovie[0]?.id"
     (currentMovieId)="currentMovieId($event)"

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

@@ -11,6 +11,9 @@
       '_1080p.jpg' +
       ')'
   }"
+  [ngClass]="{
+    fullVh: !screenWidth
+  }"
 >
   @if (currentMovie.length > 0) {
   <div class="content">

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

@@ -27,6 +27,13 @@ section {
   }
 }
 
+.fullVh {
+  height: 100vh;
+  &::after {
+    height: 0%;
+  }
+}
+
 .content {
   position: relative;
   width: 50%;

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

@@ -20,6 +20,7 @@ import { environment } from '../../../../environments/environment';
 })
 export class HeroBannerComponent {
   @Input() currentMovie: any[] = [];
+  @Input() screenWidth: boolean = false;
   @Output() playMovie = new EventEmitter<string>();
   @Output() movieIsUploadedChange = new EventEmitter<{
     [resolution: string]: boolean;

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

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