Update the poster images css

frontend/js/components/list/poster.js

@@ -9,7 +9,7 @@ const Poster = (props) => {
       src={props.data.get("poster_url")}
       onClick={props.onClick}
       onDoubleClick={props.onDoubleClick}
-      className={`my-1 m-md-2 img-thumbnail ${className}`}
+      className={`my-1 m-md-2 img-thumbnail object-fit-cover ${className}`}
     />
   );
 }

frontend/js/components/list/posters.js

@@ -39,7 +39,7 @@ const ListPosters = (props) => {
   }
 
   return (
-    <div className="col px-1">
+    <div className="col-4 col-md-8 px-1">
       {displayFilter &&
         <ListFilter
           updateFilter={props.updateFilter}
@@ -112,7 +112,7 @@ const Posters = (props) => {
 
   return (
     <InfiniteScroll
-      className="poster-list d-block flex-row flex-wrap justify-content-around"
+      className="poster-list d-flex flex-column flex-sm-row flex-sm-wrap justify-content-around"
       dataLength={size}
       next={loadMore}
       hasMore={hasMore()}

frontend/scss/app.scss

@@ -60,10 +60,11 @@ div.show.dropdown.nav-item > div {
 
 .poster-list {
     img {
-      max-height: 20rem;
-      object-fit: cover;
-      max-width: 100%;
-      flex-basis: content;
+        display: block;
+        height: auto;
+        width: 100%;
+        max-width:12rem;
+        max-height:18rem;
     }
 }
 
@@ -91,7 +92,7 @@ div.show.dropdown.nav-item > div {
 }
 
 .show-thumbnail {
-    max-height: 300px;
+    max-height: 30rem;
 }
 
 div.sweet-alert > h2 {