Some final polishing touches

src/pages/Actor.jsx

@@ -122,7 +122,9 @@ const Actor = () => {
                                 className={styles.Movie}
                             >
                                 <img src={movie.posterUrl} />
-                                <h3>{movie.title}</h3>
+                                <h3 className={styles.MovieTitle}>
+                                    {movie.title}
+                                </h3>
                             </Link>
                         ))}
                     </div>

src/pages/Home.jsx

@@ -40,11 +40,15 @@ const Home = () => {
     return (
         <div className={styles.Container}>
             <TopBar search={search} setSearch={setSearch} />
-            <div className={styles.CardList}>
-                {movies?.map((movie) => (
-                    <Card key={movie.id} movie={movie} />
-                ))}
-            </div>
+            {movies?.length ? (
+                <div className={styles.CardList}>
+                    {movies?.map((movie) => (
+                        <Card key={movie.id} movie={movie} />
+                    ))}
+                </div>
+            ) : (
+                <h1 className={styles.NoMovies}>No results found</h1>
+            )}
         </div>
     )
 }

src/pages/Movie.jsx

@@ -71,7 +71,9 @@ const Movie = () => {
                         <h1 className={styles.Title}>
                             {movie?.title} - {movie?.year}
                         </h1>
-                        <p className={styles.Tagline}>{movie?.tagline}</p>
+                        {movie?.tagline && (
+                            <p className={styles.Tagline}>{movie?.tagline}</p>
+                        )}
                         <a href="#bottom" className={styles.More}>
                             <p>More info</p>
                             <svg

src/pages/Ratings.jsx

@@ -15,16 +15,20 @@ const Ratings = () => {
         <>
             <TopBar />
             <div className={styles.Container}>
-                <hr />
-                <div className={styles.CardList}>
-                    {ratings?.map((movie) => (
-                        <Card
-                            key={movie.id}
-                            movie={movie}
-                            setRating={(rating) => setRating(rating, movie)}
-                        />
-                    ))}
-                </div>
+                <h1 className={styles.Header}>Your rated movies</h1>
+                {ratings?.length ? (
+                    <div className={styles.CardList}>
+                        {ratings?.map((movie) => (
+                            <Card
+                                key={movie.id}
+                                movie={movie}
+                                setRating={(rating) => setRating(rating, movie)}
+                            />
+                        ))}
+                    </div>
+                ) : (
+                    <h1 className={styles.NoMovies}>No rated movies.</h1>
+                )}
             </div>
         </>
     )

src/styles/Actor.module.css

@@ -8,6 +8,7 @@
 .Top {
     display: flex;
     gap: 20px;
+    margin-bottom: 30px;
 }
 
 .Thumb {
@@ -45,6 +46,14 @@
     gap: 10px;
 }
 
+.MovieTitle {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .Collapsed {
     -webkit-line-clamp: 5;
 }
@@ -81,3 +90,7 @@
 .Movie img {
     height: 300px;
 }
+
+.Section h1 {
+    margin-top: 0;
+}

src/styles/Home.module.css

@@ -14,3 +14,8 @@
     gap: 20px;
     text-align: center;
 }
+
+.NoMovies {
+    color: white;
+    font-size: 2.5em;
+}

src/styles/Movie.module.css

@@ -14,17 +14,21 @@
 
 .Thumb {
     position: absolute;
-    left: 40px;
+    left: 25px;
     bottom: 50px;
     box-shadow: 5px 5px 50px #00000030;
 }
 
 .Summary {
-    background: linear-gradient(#00000035, black);
-    height: 30%;
+    background: linear-gradient(#00000050, black);
     font-size: 20px;
     overflow: scroll;
+    padding: 10px;
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
 }
 
 .Overview {
@@ -35,6 +39,14 @@
     color: white;
     font-size: 1.3em;
     font-weight: bold;
+    display: flex;
+    gap: 5px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.More p {
+    margin: 0;
 }
 
 .More:not(:hover) {
@@ -42,13 +54,15 @@
 }
 
 .Title {
-    margin-top: 10px;
-    margin-bottom: 15px;
-    font-size: 70px;
+    font-size: 2.75em;
+    width: 40%;
+    margin: 0;
 }
 
 .Tagline {
-    font-size: 30px;
+    font-size: 1.65em;
+    width: 40%;
+    margin: 0;
     font-weight: bold;
 }
 

src/styles/Ratings.module.css

@@ -16,3 +16,13 @@
     gap: 20px;
     text-align: center;
 }
+
+.Header {
+    font-size: 3em;
+    margin: 10px;
+}
+
+.NoMovies {
+    width: 100%;
+    text-align: center;
+}

src/styles/TopBar.module.css

@@ -52,7 +52,6 @@
     font: inherit;
     width: 100%;
     height: 3em;
-    margin-top: 10px;
     border-radius: 10px;
     background-color: var(--secondary);
 }