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,8 +25,7 @@ const ListDetails = props => {
   }
 
   return (
-    <div className="col-8 col-md-4 list-details pl-1 d-flex align-items-start flex-column">
-      <div className="video-details flex-fill d-flex 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">
       <Title
         title={props.data.get("title")}
         wishlist={props.wishlist}
@@ -63,7 +62,6 @@ const ListDetails = props => {
       <Plot plot={props.data.get("plot")} />
       {props.children}
     </div>
-    </div>
   );
 };
 ListDetails.propTypes = {

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;