expand text area

src/index.css

@@ -1,3 +1,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* width */
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+	background: #111;
+	border-radius: 5px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+	background: #444;
+	border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	background: #555;
+}

src/objects/sidebar.tsx

@@ -19,21 +19,27 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
       "Summary unavailable." :
       ""
   return <div id="sidebar" className={className}>
-    <h1 className="font-bold text-base sm:text-lg text-nowrap sm:text-wrap my-1 sm:my-4 sm:h-14 overflow-hidden">{movie?.title ?? "loading"}</h1>
+    <div className="sm:h-14 w-fit flex justify-center items-center">
+      <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
+    </div>
     <div className="flex flex-row sm:flex-col gap-2 justify-center sm:items-center">
       <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="h-32 sm:h-96 aspect-poster flex justify-center">
         <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
           objectFit: "clip",
-          height: "100%"
+          height: "100%",
+          apectRatio: "2 / 3"
         }} />
       </a>
       {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-      <div className="h-32 sm:h-56 w-64 sm:w-full overflow-scroll sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
+      <div className="h-32 sm:h-72 w-64 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
         {/* TODO: make the apology vertically centered */}
-        <p id="summary" className="self-start">{movie.overview === null ? "Loading"
+        {movie.overview === null ?
-          : movie.overview === "" ? apology
+          <p>Loading...</p>
-            : movie.overview}
+          : movie.overview === "" ?
-        </p>
+            <p>{apology}</p>
+            :
+            <p className="self-start">{movie.overview}</p>
+        }
       </div>
     </div>
     <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-16 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />