Fixed: Links and already added icons overflowing on add artist/album search results

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

frontend/src/Search/Album/AddNewAlbumSearchResult.css

@@ -34,24 +34,37 @@
 
 .content {
   flex: 0 1 100%;
+  overflow: hidden;
 }
 
-.name {
+.titleRow {
   display: flex;
+}
+
+.titleContainer {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 1 auto;
+}
+
+.title {
   font-weight: 300;
   font-size: 36px;
 }
 
-.artistName {
-  font-weight: 300;
-  font-size: 20px;
-}
-
 .year {
   margin-left: 10px;
   color: $disabledColor;
 }
 
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 0 auto;
+  height: 55px;
+}
+
 .mbLink {
   composes: link from '~Components/Link/Link.css';
 
@@ -75,3 +88,10 @@
   margin-top: 20px;
   text-align: justify;
 }
+
+@media only screen and (max-width: $breakpointMedium) {
+  .titleRow {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+}

frontend/src/Search/Album/AddNewAlbumSearchResult.js

@@ -111,21 +111,26 @@ class AddNewAlbumSearchResult extends Component {
           }
 
           <div className={styles.content}>
-            <div className={styles.name}>
+            <div className={styles.titleRow}>
+              <div className={styles.titleContainer}>
+                <div className={styles.title}>
                   {title}
 
                   {
                     !!disambiguation &&
                       <span className={styles.year}>({disambiguation})</span>
                   }
+                </div>
+              </div>
 
+              <div className={styles.icons}>
                 {
                   isExistingAlbum ?
                     <Icon
                       className={styles.alreadyExistsIcon}
                       name={icons.CHECK_CIRCLE}
-                    size={20}
+                      size={36}
-                    title="Album already in your library"
+                      title="Already in your library"
                     /> :
                     null
                 }
@@ -133,7 +138,7 @@ class AddNewAlbumSearchResult extends Component {
                 <Link
                   className={styles.mbLink}
                   to={`https://musicbrainz.org/release-group/${foreignAlbumId}`}
-                onPress={this.onMBLinkPress}
+                  onPress={this.onTVDBLinkPress}
                 >
                   <Icon
                     className={styles.mbLinkIcon}
@@ -141,22 +146,7 @@ class AddNewAlbumSearchResult extends Component {
                     size={28}
                   />
                 </Link>
-
               </div>
-
-            <div>
-              <span className={styles.artistName}> By: {artist.artistName}</span>
-
-              {
-                isExistingArtist ?
-                  <Icon
-                    className={styles.alreadyExistsIcon}
-                    name={icons.CHECK_CIRCLE}
-                    size={15}
-                    title="Artist already in your library"
-                  /> :
-                  null
-              }
             </div>
 
             <div>

frontend/src/Search/Artist/AddNewArtistSearchResult.css

@@ -34,10 +34,20 @@
 
 .content {
   flex: 0 1 100%;
+  overflow: hidden;
+}
+
+.nameRow {
+  display: flex;
+}
+
+.nameContainer {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 1 auto;
 }
 
 .name {
-  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;
+}
+
 .mbLink {
   composes: link from '~Components/Link/Link.css';
 
@@ -70,3 +88,10 @@
   margin-top: 20px;
   text-align: justify;
 }
+
+@media only screen and (max-width: $breakpointMedium) {
+  .titleRow {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+}

frontend/src/Search/Artist/AddNewArtistSearchResult.js

@@ -111,22 +111,26 @@ class AddNewArtistSearchResult extends Component {
           }
 
           <div className={styles.content}>
+            <div className={styles.nameRow}>
+              <div className={styles.nameContainer}>
                 <div className={styles.name}>
                   {artistName}
 
                   {
-                !name.contains(year) && year ?
+                    !artistName.contains(year) && year ?
                       <span className={styles.year}>
                         ({year})
                       </span> :
                       null
                   }
-
                   {
                     !!disambiguation &&
                       <span className={styles.year}>({disambiguation})</span>
                   }
+                </div>
+              </div>
 
+              <div className={styles.icons}>
                 {
                   isExistingArtist ?
                     <Icon
@@ -150,6 +154,7 @@ class AddNewArtistSearchResult extends Component {
                   />
                 </Link>
               </div>
+            </div>
 
             <div>
               <Label size={sizes.LARGE}>