update responsive design

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

@@ -1,13 +1,17 @@
 <section>
-  @if (currentMovie[0]) {
+  @if (movies.length > 0) {
   <!-- If at least one film has been uploaded -->
   @if (playMovie === "") {
   <app-header [browse]="true"></app-header>
+  @if (this.checkScreenWidth()) {
   <app-hero-banner
     [currentMovie]="currentMovie"
     (playMovie)="playVideo($event)"
     (movieIsUploadedChange)="onMovieIsUploadedChange($event)"
   ></app-hero-banner>
+  } @else {
+  <div class="spacer"></div>
+  }
   <app-categories
     [movies]="movies"
     [currentMovie]="currentMovie[0]?.id"

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

@@ -45,6 +45,10 @@ section {
   transition: opacity 300ms ease-in-out;
 }
 
+.spacer {
+  margin-top: 120px;
+}
+
 .add-button {
   position: absolute;
   bottom: 24px;
@@ -134,6 +138,8 @@ section {
   transform: scale(1);
 }
 
+/*------------- RESPONSIVE -------------*/
+
 @media screen and (max-width: 550px) {
   form {
     flex-direction: column;
@@ -151,8 +157,6 @@ section {
   }
 }
 
-/*------------- RESPONSIVE -------------*/
-
 @media screen and (max-width: 500px) {
   .resolution-btn {
     border-radius: 2px;

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

@@ -37,6 +37,7 @@ export class BrowseComponent implements OnInit {
   movies: any[] = [];
   currentMovie: any[] = [];
   playMovie: string = '';
+  isWideScreen: boolean = false;
   uploadMovieOverview: boolean = false;
   currentResolution: '480p' | '720p' | '1080p' = '720p';
   movieIsUploaded: { [resolution: string]: boolean } = {
@@ -52,7 +53,13 @@ export class BrowseComponent implements OnInit {
 
   async ngOnInit() {
     await this.loadAllMovies();
-    this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
+    if (this.checkScreenWidth()) {
+      this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
+    }
+  }
+
+  checkScreenWidth() {
+    return (this.isWideScreen = window.innerWidth > 600);
   }
 
   onMovieIsUploadedChange(newStatus: { [resolution: string]: boolean }) {

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

@@ -112,6 +112,12 @@ section {
 
 /*------------- RESPONSIVE -------------*/
 
+@media screen and (max-width: 600px) {
+  .hide-scrollbar {
+    height: calc(100% - 120px);
+  }
+}
+
 @media screen and (max-width: 400px) {
   .category {
     p {