style sidebar

src/App.css

@@ -54,8 +54,10 @@ main {
 
   min-height: 100%;
   display: flex;
+
   flex-direction: column;
-  justify-content: flex-end;
+  justify-content: space-evenly;
+  align-content: stretch;
 
   h1 {
     font-size: 2em;
@@ -63,13 +65,18 @@ main {
     /* line-height: 0.8em; */
     font-family: RobotoBold;
     padding: 0.1em 0.2em 0.1em 0.2em;
+    align-self: flex-start;
+  }
+
+  #summary {
+    overflow: scroll;
+    flex-grow: 2;
+    max-height: 24rem;
   }
 
   p {
     font-family: Jura;
     padding: 0.2em;
-    overflow: scroll;
-    height: 10em;
     margin: 0.1em 0.2em 0.1em 0.2em;
   }
 

src/objects/sidebar.tsx

@@ -18,7 +18,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: Sideb
         {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
       </figcaption>
     </figure>
-    <p>{movie.overview === null ? "Loading"
+    <p id="summary">{movie.overview === null ? "Loading"
       : movie.overview === "" ? "Resumen no disponible."
         : movie.overview}
     </p>