From 453cc9458d8feb60c1e4ff6b9918d2f18f086910 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Mon, 7 Oct 2024 18:33:40 +0200
Subject: [PATCH] expand text area

---
 src/index.css           | 22 ++++++++++++++++++++++
 src/objects/sidebar.tsx | 20 +++++++++++++-------
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/index.css b/src/index.css
index b5c61c9..7cd70a4 100644
--- a/src/index.css
+++ b/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;
+}
diff --git a/src/objects/sidebar.tsx b/src/objects/sidebar.tsx
index 05df2b4..f7e781c 100644
--- a/src/objects/sidebar.tsx
+++ b/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 === "" ? apology
-            : movie.overview}
-        </p>
+        {movie.overview === null ?
+          <p>Loading...</p>
+          : movie.overview === "" ?
+            <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" />