Fixed: Links and already added icons overflowing on add movie search results

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.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;
+}
+
 .alreadyExistsIcon {
   margin-left: 10px;
   color: #37bc9b;
@@ -67,3 +85,10 @@
   margin-left: 8px;
   pointer-events: all;
 }
+
+@media only screen and (max-width: $breakpointMedium) {
+  .titleRow {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+}

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -94,33 +94,43 @@ class AddNewMovieSearchResult extends Component {
           }
 
           <div className={styles.content}>
-            <div className={styles.title}>
+            <div className={styles.titleRow}>
-              {title}
+              <div className={styles.titleContainer}>
+                <div className={styles.title}>
+                  {title}
 
-              {
+                  {
-                !title.contains(year) && !!year &&
+                    !title.contains(year) && !!year ?
-                  <span className={styles.year}>({year})</span>
+                      <span className={styles.year}>
-              }
+                        ({year})
+                      </span> :
+                      null
+                  }
+                </div>
+              </div>
 
-              {
+              <div className={styles.icons}>
-                isExistingMovie &&
-                  <Icon
-                    className={styles.alreadyExistsIcon}
-                    name={icons.CHECK_CIRCLE}
-                    size={36}
-                    title={translate('AlreadyInYourLibrary')}
-                  />
-              }
 
-              {
+                {
-                isExclusionMovie &&
+                  isExistingMovie &&
-                  <Icon
+                    <Icon
-                    className={styles.exclusionIcon}
+                      className={styles.alreadyExistsIcon}
-                    name={icons.DANGER}
+                      name={icons.CHECK_CIRCLE}
-                    size={36}
+                      size={36}
-                    title={translate('MovieIsOnImportExclusionList')}
+                      title={translate('AlreadyInYourLibrary')}
-                  />
+                    />
-              }
+                }
+
+                {
+                  isExclusionMovie &&
+                    <Icon
+                      className={styles.exclusionIcon}
+                      name={icons.DANGER}
+                      size={36}
+                      title={translate('MovieIsOnImportExclusionList')}
+                    />
+                }
+              </div>
             </div>
 
             <div>