Mas cmabios de estilo, relamente no se exactamente que cambio hice

src/components/EntityList.scss

@@ -17,7 +17,6 @@ ul.entity-list {
         width: 200px;
         height: 200px;
         background-color: var(--gray-2);
-        margin-right: 1em;
       }
 
       .body {
@@ -55,6 +54,10 @@ ul.entity-list {
           display: flex;
           flex-direction: column;
         }
+
+        .cover {
+          margin-right: 1em;
+        }
       }
 
       .widget {
@@ -74,8 +77,7 @@ ul.entity-list {
   justify-content: space-between;
 
   .entity-item {
-    margin-bottom: 2em;
-
+    padding-bottom: .5em;
     a {
       .cover {
         width: 250px;
@@ -83,7 +85,9 @@ ul.entity-list {
       }
 
       .body {
-        height: 15px;
+        display: flex;
+        flex-direction: column;
+
         .title {
           max-width: 250px;
           display: inline-block;
@@ -91,8 +95,8 @@ ul.entity-list {
           overflow: hidden;
           text-overflow: ellipsis;
         }
+
         .subtitle {
-          display: none;
         }
       }
     }
@@ -131,6 +135,7 @@ ul.entity-list {
       border-bottom: solid var(--line-width) var(--accent);
       transition: width 300ms ease-in;
       width: 0;
+      margin-top: -5px;
     }
 
     .cover {

src/services/search_service.js

@@ -2,20 +2,20 @@ import axios from 'axios'
 
 let baseUrl = `${process.env.REACT_APP_API_SERVER}/api/brainz`;
 
-export async function searchArtist(query, page) {
-    const url = `${baseUrl}/artist?query=${query}&page=${page}`;
+export async function searchArtist(query, page, per_page=10) {
+    const url = `${baseUrl}/artist?query=${query}&page=${page}&per_page=${per_page}`;
     const response = await axios.get(url);
     return response.data
 }
 
-export async function searchDisc(query, page) {
-    const url = `${baseUrl}/disc?query=${query}&page=${page}`;
+export async function searchDisc(query, page, per_page=10) {
+    const url = `${baseUrl}/disc?query=${query}&page=${page}&per_page=${per_page}`;
     const response = await axios.get(url);
     return response.data
 }
 
-export async function searchSong(query, page) {
-    const url = `${baseUrl}/recording?query=${query}&page=${page}`;
+export async function searchSong(query, page, per_page=10) {
+    const url = `${baseUrl}/recording?query=${query}&page=${page}&per_page=${per_page}`;
     const response = await axios.get(url);
     return response.data
 }

src/styles/grid.scss

@@ -5,8 +5,11 @@
 
   .row {
     display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
      & > * {
        padding: .5em;
+       min-width: 300px;
      }
 
     .col, col-1 {

src/views/Search.jsx

@@ -97,13 +97,13 @@ const SearchDiscs = (props) => {
     const loadDiscs = (query, page) => {
         page = page ? page : 1;
 
-        searchDisc(query, page).then((response) => {
+        searchDisc(query, page, 16).then((response) => {
             setDiscs(response.discs);
             setPaginate(response.paginate);
         })
     };
 
-    let discsComponent = <EntityList placeholder={true} size={10} cover={true}/>;
+    let discsComponent = <EntityList placeholder={true} grid={true} size={16} cover={true}/>;
     if (discs) {
         const items = discs.map((disc) => ({
           'cover': <CoverArt disc={disc}/>,
@@ -114,7 +114,7 @@ const SearchDiscs = (props) => {
         const list = [{
           'items': items
         }]
-        discsComponent = <EntityList list={list}/>
+        discsComponent = <EntityList list={list} grid={true}/>
     }
 
     let paginateComponent;