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

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
Signed-off-by: Robin Dadswell <robin@dadswell.email>

frontend/src/Search/Author/AddNewAuthorSearchResult.css

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

frontend/src/Search/Author/AddNewAuthorSearchResult.js

@@ -113,44 +113,49 @@ class AddNewAuthorSearchResult extends Component {
           }
 
           <div className={styles.content}>
-            <div className={styles.name}>
+            <div className={styles.nameRow}>
-              {authorName}
+              <div className={styles.nameContainer}>
-
+                <div className={styles.name}>
-              {
+                  {authorName}
-                !name.contains(year) && year ?
+
-                  <span className={styles.year}>
+                  {
-                    ({year})
+                    !authorName.contains(year) && year ?
-                  </span> :
+                      <span className={styles.year}>
-                  null
+                        ({year})
-              }
+                      </span> :
-
+                      null
-              {
+                  }
-                !!disambiguation &&
+                  {
-                  <span className={styles.year}>({disambiguation})</span>
+                    !!disambiguation &&
-              }
+                      <span className={styles.year}>({disambiguation})</span>
-
+                  }
-              {
+                </div>
-                isExistingAuthor ?
+              </div>
+
+              <div className={styles.icons}>
+                {
+                  isExistingAuthor ?
+                    <Icon
+                      className={styles.alreadyExistsIcon}
+                      name={icons.CHECK_CIRCLE}
+                      size={36}
+                      title="Already in your library"
+                    /> :
+                    null
+                }
+
+                <Link
+                  className={styles.mbLink}
+                  to={`https://goodreads.com/author/show/${foreignAuthorId}`}
+                  onPress={this.onMBLinkPress}
+                >
                   <Icon
-                    className={styles.alreadyExistsIcon}
+                    className={styles.mbLinkIcon}
-                    name={icons.CHECK_CIRCLE}
+                    name={icons.EXTERNAL_LINK}
-                    size={36}
+                    size={28}
-                    title="Already in your library"
+                  />
-                  /> :
+                </Link>
-                  null
+              </div>
-              }
-
-              <Link
-                className={styles.mbLink}
-                to={`https://goodreads.com/author/show/${foreignAuthorId}`}
-                onPress={this.onMBLinkPress}
-              >
-                <Icon
-                  className={styles.mbLinkIcon}
-                  name={icons.EXTERNAL_LINK}
-                  size={28}
-                />
-              </Link>
             </div>
 
             <div>

frontend/src/Search/Book/AddNewBookSearchResult.css

@@ -34,17 +34,22 @@
 
 .content {
   flex: 0 1 100%;
+  overflow: hidden;
 }
 
-.name {
+.titleRow {
   display: flex;
-  font-weight: 300;
-  font-size: 36px;
 }
 
-.authorName {
+.titleContainer {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 1 auto;
+}
+
+.title {
   font-weight: 300;
-  font-size: 20px;
+  font-size: 36px;
 }
 
 .year {
@@ -52,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';
 
@@ -74,3 +87,10 @@
   margin-top: 20px;
   text-align: justify;
 }
+
+@media only screen and (max-width: $breakpointMedium) {
+  .titleRow {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+}

frontend/src/Search/Book/AddNewBookSearchResult.js

@@ -112,52 +112,42 @@ class AddNewBookSearchResult extends Component {
           }
 
           <div className={styles.content}>
-            <div className={styles.name}>
+            <div className={styles.titleRow}>
-              {title}
+              <div className={styles.titleContainer}>
-
+                <div className={styles.title}>
-              {
+                  {title}
-                !!disambiguation &&
+
-                  <span className={styles.year}>({disambiguation})</span>
+                  {
-              }
+                    !!disambiguation &&
-
+                      <span className={styles.year}>({disambiguation})</span>
-              {
+                  }
-                isExistingBook ?
+                </div>
-                  <Icon
+              </div>
-                    className={styles.alreadyExistsIcon}
+
-                    name={icons.CHECK_CIRCLE}
+              <div className={styles.icons}>
-                    size={20}
+                {
-                    title="Book already in your library"
+                  isExistingBook ?
-                  /> :
+                    <Icon
-                  null
+                      className={styles.alreadyExistsIcon}
-              }
+                      name={icons.CHECK_CIRCLE}
-
+                      size={36}
-              <Link
+                      title="Already in your library"
-                className={styles.mbLink}
+                    /> :
-                to={`https://goodreads.com/book/show/${editions[0].foreignEditionId}`}
+                    null
-                onPress={this.onMBLinkPress}
+                }
-              >
+
-                <Icon
+                <Link
-                  className={styles.mbLinkIcon}
+                  className={styles.mbLink}
-                  name={icons.EXTERNAL_LINK}
+                  to={`https://goodreads.com/book/show/${editions[0].foreignEditionId}`}
-                  size={28}
+                  onPress={this.onTVDBLinkPress}
-                />
+                >
-              </Link>
-
-            </div>
-
-            <div>
-              <span className={styles.authorName}> By: {author.authorName}</span>
-
-              {
-                isExistingAuthor ?
                   <Icon
-                    className={styles.alreadyExistsIcon}
+                    className={styles.mbLinkIcon}
-                    name={icons.CHECK_CIRCLE}
+                    name={icons.EXTERNAL_LINK}
-                    size={15}
+                    size={28}
-                    title="Author already in your library"
+                  />
-                  /> :
+                </Link>
-                  null
+              </div>
-              }
             </div>
 
             <div>