From 5ae5d1043a78990ff3425c93ebb66e98aef531b7 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Mon, 16 Dec 2024 01:25:03 +0200
Subject: [PATCH] Improve opening add movie modal for Discover Overview

---
 .../Overview/DiscoverMovieOverview.css        |  8 ++++-
 .../Overview/DiscoverMovieOverview.css.d.ts   |  1 +
 .../Overview/DiscoverMovieOverview.js         | 33 +++++++++++--------
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css
index 43290e5b4..73ff1a651 100644
--- a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css
+++ b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css
@@ -85,10 +85,16 @@ $hoverScale: 1.05;
   flex: 1 0 auto;
 }
 
+.overviewContainer {
+  display: flex;
+  justify-content: space-between;
+  flex: 0 1 1000px;
+  flex-direction: column;
+}
+
 .overview {
   composes: link;
 
-  flex: 0 1 1000px;
   overflow: hidden;
   min-height: 0;
 }
diff --git a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css.d.ts b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css.d.ts
index 8c2e67476..c1f09e1d9 100644
--- a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css.d.ts
+++ b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css.d.ts
@@ -11,6 +11,7 @@ interface CssExports {
   'link': string;
   'lists': string;
   'overview': string;
+  'overviewContainer': string;
   'poster': string;
   'posterContainer': string;
   'title': string;
diff --git a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js
index dbc271416..52fb0abe1 100644
--- a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js
+++ b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js
@@ -133,14 +133,20 @@ class DiscoverMovieOverview extends Component {
                 />
               </div>
 
-              <MoviePoster
-                className={styles.poster}
+              <Link
+                className={styles.link}
                 style={elementStyle}
-                images={images}
-                size={250}
-                lazy={false}
-                overflow={true}
-              />
+                {...linkProps}
+              >
+                <MoviePoster
+                  className={styles.poster}
+                  style={elementStyle}
+                  images={images}
+                  size={250}
+                  lazy={false}
+                  overflow={true}
+                />
+              </Link>
             </div>
           </div>
 
@@ -242,11 +248,13 @@ class DiscoverMovieOverview extends Component {
             </div>
 
             <div className={styles.details}>
-              <div className={styles.overview}>
-                <TextTruncate
-                  line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
-                  text={overview}
-                />
+              <div className={styles.overviewContainer}>
+                <Link className={styles.overview} {...linkProps}>
+                  <TextTruncate
+                    line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
+                    text={overview}
+                  />
+                </Link>
               </div>
 
               <DiscoverMovieOverviewInfo
@@ -255,7 +263,6 @@ class DiscoverMovieOverview extends Component {
                 {...overviewOptions}
                 {...otherProps}
               />
-
             </div>
           </div>
         </div>