diff --git a/frontend/src/Search/Album/AddNewAlbumSearchResult.css b/frontend/src/Search/Album/AddNewAlbumSearchResult.css
index 48a07cdb6..c57cb1549 100644
--- a/frontend/src/Search/Album/AddNewAlbumSearchResult.css
+++ b/frontend/src/Search/Album/AddNewAlbumSearchResult.css
@@ -34,17 +34,22 @@
.content {
flex: 0 1 100%;
+ overflow: hidden;
}
-.name {
+.titleRow {
display: flex;
- font-weight: 300;
- font-size: 36px;
}
-.artistName {
+.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';
@@ -75,3 +88,10 @@
margin-top: 20px;
text-align: justify;
}
+
+@media only screen and (max-width: $breakpointMedium) {
+ .titleRow {
+ justify-content: space-between;
+ overflow: hidden;
+ }
+}
diff --git a/frontend/src/Search/Album/AddNewAlbumSearchResult.js b/frontend/src/Search/Album/AddNewAlbumSearchResult.js
index 91ee59574..6bb40d619 100644
--- a/frontend/src/Search/Album/AddNewAlbumSearchResult.js
+++ b/frontend/src/Search/Album/AddNewAlbumSearchResult.js
@@ -111,52 +111,42 @@ class AddNewAlbumSearchResult extends Component {
}
-
- {title}
-
- {
- !!disambiguation &&
- ({disambiguation})
- }
-
- {
- isExistingAlbum ?
- :
- null
- }
-
-
-
-
-
-
-
-
-
By: {artist.artistName}
-
- {
- isExistingArtist ?
+
+
+
+ {title}
+
+ {
+ !!disambiguation &&
+ ({disambiguation})
+ }
+
+
+
+
+ {
+ isExistingAlbum ?
+ :
+ null
+ }
+
+
:
- null
- }
+ className={styles.mbLinkIcon}
+ name={icons.EXTERNAL_LINK}
+ size={28}
+ />
+
+
diff --git a/frontend/src/Search/Artist/AddNewArtistSearchResult.css b/frontend/src/Search/Artist/AddNewArtistSearchResult.css
index b4dc336f2..d8266c734 100644
--- a/frontend/src/Search/Artist/AddNewArtistSearchResult.css
+++ b/frontend/src/Search/Artist/AddNewArtistSearchResult.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';
@@ -70,3 +88,10 @@
margin-top: 20px;
text-align: justify;
}
+
+@media only screen and (max-width: $breakpointMedium) {
+ .titleRow {
+ justify-content: space-between;
+ overflow: hidden;
+ }
+}
diff --git a/frontend/src/Search/Artist/AddNewArtistSearchResult.js b/frontend/src/Search/Artist/AddNewArtistSearchResult.js
index 33fc67055..835060341 100644
--- a/frontend/src/Search/Artist/AddNewArtistSearchResult.js
+++ b/frontend/src/Search/Artist/AddNewArtistSearchResult.js
@@ -111,44 +111,49 @@ class AddNewArtistSearchResult extends Component {
}
-
- {artistName}
-
- {
- !name.contains(year) && year ?
-
- ({year})
- :
- null
- }
-
- {
- !!disambiguation &&
-
({disambiguation})
- }
-
- {
- isExistingArtist ?
+
+
+
+ {artistName}
+
+ {
+ !artistName.contains(year) && year ?
+
+ ({year})
+ :
+ null
+ }
+ {
+ !!disambiguation &&
+ ({disambiguation})
+ }
+
+
+
+
+ {
+ isExistingArtist ?
+ :
+ null
+ }
+
+
:
- null
- }
-
-
-
-
+ className={styles.mbLinkIcon}
+ name={icons.EXTERNAL_LINK}
+ size={28}
+ />
+
+