From d222387d01166af0fb3843b77c436d3c84851f4d Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 16 Aug 2020 10:14:37 -0700
Subject: [PATCH] Fixed: Links and already added icons overflowing on add
 series search results

---
 .../AddNewSeries/AddNewSeriesSearchResult.css | 27 +++++++-
 .../AddNewSeries/AddNewSeriesSearchResult.js  | 64 ++++++++++---------
 2 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
index 71bbccf9b..cd7869c3e 100644
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
@@ -34,10 +34,20 @@
 
 .content {
   flex: 0 1 100%;
+  overflow: hidden;
+}
+
+.titleRow {
+  display: flex;
+}
+
+.titleContainer {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 1 auto;
 }
 
 .title {
-  display: flex;
   font-weight: 300;
   font-size: 36px;
 }
@@ -47,6 +57,14 @@
   color: $disabledColor;
 }
 
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 0 auto;
+  height: 55px;
+}
+
 .tvdbLink {
   composes: link from '~Components/Link/Link.css';
 
@@ -68,3 +86,10 @@
 .overview {
   margin-top: 20px;
 }
+
+@media only screen and (max-width: $breakpointMedium) {
+  .titleRow {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+}
diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js
index 31dfa3f5e..1037d67dc 100644
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js
@@ -97,39 +97,45 @@ class AddNewSeriesSearchResult extends Component {
           }
 
           <div className={styles.content}>
-            <div className={styles.title}>
-              {title}
+            <div className={styles.titleRow}>
+              <div className={styles.titleContainer}>
+                <div className={styles.title}>
+                  {title}
 
-              {
-                !title.contains(year) && year ?
-                  <span className={styles.year}>
+                  {
+                    !title.contains(year) && year ?
+                      <span className={styles.year}>
                     ({year})
-                  </span> :
-                  null
-              }
+                      </span> :
+                      null
+                  }
+                </div>
+              </div>
 
-              {
-                isExistingSeries ?
+              <div className={styles.icons}>
+                {
+                  isExistingSeries ?
+                    <Icon
+                      className={styles.alreadyExistsIcon}
+                      name={icons.CHECK_CIRCLE}
+                      size={36}
+                      title="Already in your library"
+                    /> :
+                    null
+                }
+
+                <Link
+                  className={styles.tvdbLink}
+                  to={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+                  onPress={this.onTVDBLinkPress}
+                >
                   <Icon
-                    className={styles.alreadyExistsIcon}
-                    name={icons.CHECK_CIRCLE}
-                    size={36}
-                    title="Already in your library"
-                  /> :
-                  null
-              }
-
-              <Link
-                className={styles.tvdbLink}
-                to={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
-                onPress={this.onTVDBLinkPress}
-              >
-                <Icon
-                  className={styles.tvdbLinkIcon}
-                  name={icons.EXTERNAL_LINK}
-                  size={28}
-                />
-              </Link>
+                    className={styles.tvdbLinkIcon}
+                    name={icons.EXTERNAL_LINK}
+                    size={28}
+                  />
+                </Link>
+              </div>
             </div>
 
             <div>