frontend/js/components/details/plot.js

@@ -6,7 +6,9 @@ export const Plot = ({ plot }) => {
     return null;
   }
 
-  return <span className="text text-break plot">{plot}</span>;
+  return (
+    <span className="text text-break overflow-auto text-justify">{plot}</span>
+  );
 };
 Plot.propTypes = { plot: PropTypes.string };
 Plot.defaultProps = { plot: "" };

frontend/js/components/list/details.js

@@ -25,44 +25,42 @@ const ListDetails = props => {
   }
 
   return (
-    <div className="col-8 col-md-4 list-details pl-1 d-flex align-items-start flex-column">
+    <div className="col-8 col-md-4 list-details pl-1 d-flex align-items-start flex-column video-details flex-fill flex-column flex-nowrap">
-      <div className="video-details flex-fill d-flex flex-column">
+      <Title
-        <Title
+        title={props.data.get("title")}
-          title={props.data.get("title")}
+        wishlist={props.wishlist}
-          wishlist={props.wishlist}
+        wishlisted={isWishlisted(props.data)}
-          wishlisted={isWishlisted(props.data)}
+      />
+      <ReleaseDate date={props.data.get("year")} />
+      <Runtime runtime={props.data.get("runtime")} />
+      <Genres genres={props.data.get("genres")} />
+      <Rating
+        rating={props.data.get("rating")}
+        votes={props.data.get("votes")}
+      />
+      <div>
+        <ImdbBadge imdbId={props.data.get("imdb_id")} />
+        <DownloadAndStream
+          url={props.data.get("polochon_url")}
+          name={props.data.get("title")}
+          subtitles={props.data.get("subtitles")}
         />
-        <ReleaseDate date={props.data.get("year")} />
-        <Runtime runtime={props.data.get("runtime")} />
-        <Genres genres={props.data.get("genres")} />
-        <Rating
-          rating={props.data.get("rating")}
-          votes={props.data.get("votes")}
-        />
-        <div>
-          <ImdbBadge imdbId={props.data.get("imdb_id")} />
-          <DownloadAndStream
-            url={props.data.get("polochon_url")}
-            name={props.data.get("title")}
-            subtitles={props.data.get("subtitles")}
-          />
-        </div>
-        <TrackingLabel
-          wishlisted={props.data.get("wishlisted")}
-          inLibrary={inLibrary(props.data)}
-          trackedSeason={props.data.get("tracked_season")}
-          trackedEpisode={props.data.get("tracked_episode")}
-        />
-        <PolochonMetadata
-          quality={props.data.get("quality")}
-          releaseGroup={props.data.get("release_group")}
-          container={props.data.get("container")}
-          audioCodec={props.data.get("audio_codec")}
-          videoCodec={props.data.get("video_codec")}
-        />
-        <Plot plot={props.data.get("plot")} />
-        {props.children}
       </div>
+      <TrackingLabel
+        wishlisted={props.data.get("wishlisted")}
+        inLibrary={inLibrary(props.data)}
+        trackedSeason={props.data.get("tracked_season")}
+        trackedEpisode={props.data.get("tracked_episode")}
+      />
+      <PolochonMetadata
+        quality={props.data.get("quality")}
+        releaseGroup={props.data.get("release_group")}
+        container={props.data.get("container")}
+        audioCodec={props.data.get("audio_codec")}
+        videoCodec={props.data.get("video_codec")}
+      />
+      <Plot plot={props.data.get("plot")} />
+      {props.children}
     </div>
   );
 };

frontend/scss/app.scss

@@ -58,12 +58,6 @@ div.show.dropdown.nav-item > div {
     cursor: pointer;
 }
 
-.plot {
-    text-align: justify;
-    max-height: 65%;
-    overflow: auto;
-}
-
 .poster-list {
     img {
         display: block;