diff --git a/changes/changelog.d/707.bugfix b/changes/changelog.d/707.bugfix
new file mode 100644
index 0000000000000000000000000000000000000000..3cd05c9743e510dcbd674dc0654eb7e9bc2a0780
--- /dev/null
+++ b/changes/changelog.d/707.bugfix
@@ -0,0 +1 @@
+Fixed cards display issues on medium/small screens (#707)
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index dd250ca09f08bbd1c27a946747a7bb72462e70f6..307ca878f88061f038722b53a800489d8aa95ceb 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -9,9 +9,9 @@
</div>
<template v-if="query.length > 0">
<h3 class="ui title"><translate>Artists</translate></h3>
- <div v-if="results.artists.length > 0" class="ui stackable three column grid">
- <div class="column" :key="artist.id" v-for="artist in results.artists">
- <artist-card class="fluid" :artist="artist" ></artist-card>
+ <div v-if="results.artists.length > 0">
+ <div class="ui cards">
+ <artist-card :key="artist.id" v-for="artist in results.artists" :artist="artist" ></artist-card>
</div>
</div>
<p v-else><translate>No artist matched your query</translate></p>
@@ -101,5 +101,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
</style>
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index cf33b0add400791c0f7cedaa16fbf3acfc0025af..b9554d01ff36b235456dcf467647683ae769992b 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -10,7 +10,7 @@
<i @click="fetchData(nextPage)" :disabled="!nextPage" :class="['ui', {disabled: !nextPage}, 'circular', 'angle right', 'icon']">
</i>
<div class="ui hidden divider"></div>
- <div class="ui three cards">
+ <div class="ui cards">
<div v-if="isLoading" class="ui inverted active dimmer">
<div class="ui loader"></div>
</div>
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index ca7e2a5a03cdbc3df968f2043d133a6e1a107e82..41b3b2c6fbe080e23e7ffc661b4c5d8b28f6e4bb 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -42,17 +42,15 @@
v-if="result"
v-masonry
transition-duration="0"
- item-selector=".column"
+ item-selector=".card"
percent-position="true"
- stagger="0"
- class="ui stackable three column doubling grid">
- <div
- v-masonry-tile
- v-if="result.results.length > 0"
- v-for="artist in result.results"
- :key="artist.id"
- class="column">
- <artist-card class="fluid" :artist="artist"></artist-card>
+ stagger="0">
+ <div v-if="result.results.length > 0" class="ui cards">
+ <artist-card
+ v-masonry-tile
+ v-for="artist in result.results"
+ :key="artist.id"
+ :artist="artist"></artist-card>
</div>
</div>
<div class="ui center aligned basic segment">
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 7aec1d61b01ea1da0203861b1450d829fc3d01f8..5b433dcb2d3da801b819c7171ff5f3859b70268e 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -64,17 +64,18 @@
v-if="result"
v-masonry
transition-duration="0"
- item-selector=".column"
+ item-selector=".card"
percent-position="true"
- stagger="0"
- class="ui stackable three column doubling grid">
+ stagger="0">
<div
- v-masonry-tile
v-if="result.results.length > 0"
- v-for="radio in result.results"
- :key="radio.id"
- class="column">
- <radio-card class="fluid" type="custom" :custom-radio="radio"></radio-card>
+ class="ui cards">
+ <radio-card
+ type="custom"
+ v-masonry-tile
+ v-for="radio in result.results"
+ :key="radio.id"
+ :custom-radio="radio"></radio-card>
</div>
</div>
<div class="ui center aligned basic segment">
diff --git a/front/src/components/playlists/CardList.vue b/front/src/components/playlists/CardList.vue
index 4d4746090f757dddaf5d33cd4d924440e725ca09..44504a5738ad1d83ded1884a9ed454495f0bc52d 100644
--- a/front/src/components/playlists/CardList.vue
+++ b/front/src/components/playlists/CardList.vue
@@ -3,16 +3,16 @@
v-if="playlists.length > 0"
v-masonry
transition-duration="0"
- item-selector=".column"
+ item-selector=".card"
percent-position="true"
- stagger="0"
- class="ui stackable three column doubling grid">
- <div
- v-masonry-tile
- v-for="playlist in playlists"
- :key="playlist.id"
- class="column">
- <playlist-card class="fluid" :playlist="playlist"></playlist-card>
+ stagger="0">
+ <div class="ui cards">
+ <playlist-card
+ :playlist="playlist"
+ v-masonry-tile
+ v-for="playlist in playlists"
+ :key="playlist.id"
+ ></playlist-card>
</div>
</div>
</template>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index c289e6de9fafaa506a6398070beb251a0ba5ed50..7329c502ec27f0f1f55cf41abea6636c9cf53ea7 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -10,7 +10,7 @@
<div v-if="isLoading" class="ui inverted active dimmer">
<div class="ui loader"></div>
</div>
- <playlist-card class="fluid" v-for="playlist in objects" :key="playlist.id" :playlist="playlist"></playlist-card>
+ <playlist-card v-for="playlist in objects" :key="playlist.id" :playlist="playlist"></playlist-card>
</div>
</template>
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index 6b327f370cf9f10587a30402905305ecea4d27a3..13523b198fcb76080825b8b87790ecd12430b721 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -1,5 +1,5 @@
<template>
- <div class="ui fluid card">
+ <div class="ui card">
<div class="content">
<div class="header">
{{ library.name }}
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index c9d7ad1a4b6c63f9b12a05bcaa47db4ea5153546..364783f3eae57fcd94b6b8282c2fdd0dd1e7cb4a 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -1,5 +1,5 @@
<template>
- <div class="ui fluid card">
+ <div class="ui card">
<div class="content">
<div class="header">
{{ library.name }}