From 051f8adcfb21d5ab55f3c46c05b9389fad6d53b8 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Sat, 18 May 2024 14:49:21 +0200
Subject: [PATCH] style sidebar

---
 src/App.css             | 13 ++++++++++---
 src/objects/sidebar.tsx |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/App.css b/src/App.css
index 8224a67..cd72c42 100644
--- a/src/App.css
+++ b/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;
   }
 
diff --git a/src/objects/sidebar.tsx b/src/objects/sidebar.tsx
index 2fde4e4..105ee3c 100644
--- a/src/objects/sidebar.tsx
+++ b/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>