fix shifting chosenMovie image

src/App.css

@@ -56,36 +56,38 @@ main {
   background-color: rgba(0, 0, 0, 0.5);
 
   display: grid;
-
   grid-template-rows: 1fr 2fr 2fr 1fr;
-  ;
+  align-items: center;
+  justify-content: center;
 
   h1 {
-    font-size: 2em;
-    margin: 1rem 0 0 0;
+    font-size: 1.2em;
     font-family: RobotoBold;
-    padding: 0.1em 0.2em 0.1em 0.2em;
     grid-row: 1/ span 1;
+    height: fit-content;
     overflow: hidden;
+
   }
 
-  figure {
+  a {
+    display: contents;
+  }
+
+  margin: 0;
+  grid-row: 2/ span 1;
+
+  .chosen-movie-poster {
+    object-fit: cover;
+    height: 100%;
     width: 100%;
-    margin: 0;
-    grid-row: 2/ span 1;
-    place-self: center;
-
-    .chosen-movie-poster {
-      aspect-ratio: 2/3;
-      max-width: 100%;
-      max-height: 100%;
-    }
-
+    display: flex;
+    justify-content: center;
   }
 
+
   #summary {
     overflow: scroll;
-    max-height: 24rem;
+    max-height: 100%;
     grid-row: 3/ span 1;
   }
 
@@ -96,7 +98,9 @@ main {
   }
 
   footer {
+    font-size: 1.2rem;
     grid-row: 4/ span 1;
+    overflow: hidden;
   }
 
 }
@@ -180,7 +184,7 @@ main {
     border: 1rem white;
 
     h1 {
-      font-size: 1.6rem;
+      font-size: 1.4rem;
     }
 
   }

src/objects/sidebar.tsx

@@ -11,14 +11,10 @@ export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
 export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: SidebarProps) {
   return <div id="sidebar">
     <h1>{movie?.title ?? "loading"}</h1>
-    <figure>
-      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
-        <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" />
-      </a>
-      <figcaption>
-        {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-      </figcaption>
-    </figure>
+    <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
+      <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />
+    </a>
+    {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
     <p id="summary">{movie.overview === null ? "Loading"
       : movie.overview === "" ? "Resumen no disponible."
         : movie.overview}