Webserver: improve the media list layout on really small screens

buildsystem/network-sharing-server/src/pages/AudioAlbums.vue

@@ -9,7 +9,7 @@
 
         </div>
         <div v-else class="row gx-3 gy-3 media-content">
-            <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="album in albums" :key="album.id">
+            <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="album in albums" :key="album.id">
                 <MediaCardItem :media="album" :mediaType="'album'" />
             </div>
         </div>

buildsystem/network-sharing-server/src/pages/AudioArtists.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="loaded && this.artists.length !== 0" class="container">
+    <div v-if="loaded && this.artists.length !== 0" class="container container-sm">
         <div v-if="this.appStore.displayType[this.$route.name]" class="row gx-3 gy-3 media-list">
             <template v-for="artist in artists" :key="artist.id">
                 <MediaListItem :media="artist" :mediaType="'artist'" />
@@ -7,7 +7,7 @@
             </template>
         </div>
         <div v-else class="row gx-3 gy-3 media-content">
-            <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="artist in artists" :key="artist.id">
+            <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="artist in artists" :key="artist.id">
                 <MediaCardItem :media="artist" :mediaType="'artist'" />
             </div>
         </div>

buildsystem/network-sharing-server/src/pages/AudioGenres.vue

@@ -6,7 +6,7 @@
             </template>
         </div>
         <div v-else class="row gx-3 gy-3 media-content">
-            <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="genre in genres" :key="genre.id">
+            <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="genre in genres" :key="genre.id">
                 <MediaCardItem :media="genre" :mediaType="'genre'" />
             </div>
         </div>

buildsystem/network-sharing-server/src/pages/AudioTracks.vue

@@ -6,7 +6,7 @@
             </template>
         </div>
         <div v-else class="row gx-3 gy-3 media-content">
-            <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="track in tracks" :key="track.id">
+            <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="track in tracks" :key="track.id">
                 <MediaCardItem :media="track" :downloadable="true" :mediaType="'track'" />
             </div>
         </div>

buildsystem/network-sharing-server/src/pages/BrowseChild.vue

@@ -6,7 +6,7 @@
             </template>
         </div>
         <div v-else class="row gx-3 gy-3 media-content">
-            <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="item in browseResult" :key="item.id">
+            <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="item in browseResult" :key="item.id">
                 <MediaCardItem :media="item" :mediaType="(item.isFolder) ? 'folder' : 'file'" />
             </div>
         </div>

buildsystem/network-sharing-server/src/pages/BrowseList.vue

@@ -14,7 +14,7 @@
                 </template>
             </div>
             <div v-else class="row gx-3 gy-3 media-content">
-                <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="favorite in favorites" :key="favorite.id">
+                <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="favorite in favorites" :key="favorite.id">
                     <MediaCardItem :media="favorite" :mediaType="'folder'" :hideOverflow="true" />
                 </div>
             </div>
@@ -37,7 +37,7 @@
                 </template>
             </div>
             <div v-else class="row gx-3 gy-3 media-content">
-                <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="storage in storages" :key="storage.id">
+                <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="storage in storages" :key="storage.id">
                     <MediaCardItem :media="storage" :mediaType="'folder'" :hideOverflow="true" />
                 </div>
             </div>
@@ -61,7 +61,7 @@
                 </template>
             </div>
             <div v-else class="row gx-3 gy-3 media-content">
-                <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="network in networkEntries" :key="network.id">
+                <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="network in networkEntries" :key="network.id">
                     <MediaCardItem :media="network" :mediaType="'network'" :hideOverflow="true" />
                 </div>
             </div>

buildsystem/network-sharing-server/src/pages/PlaylistList.vue

@@ -6,7 +6,7 @@
             </template>
         </div>
         <div v-else class="row gx-3 gy-3 media-content">
-            <div class="col-md-3 col-lg-2 col-sm-4 col-xs-6" v-for="playlist in playlists" :key="playlist.id">
+            <div class="col-md-3 col-lg-2 col-sm-4 col-6" v-for="playlist in playlists" :key="playlist.id">
                 <MediaCardItem :media="playlist" :mediaType="'playlist'" />
             </div>
         </div>

buildsystem/network-sharing-server/src/pages/VideoList.vue

@@ -6,7 +6,7 @@
             </template>
         </div>
         <div v-else class="row gx-3 gy-3 media-content">
-            <div class="col-md-3 col-sm-4 col-xs-6" v-for="video in videos" :key="video.id">
+            <div class="col-md-3 col-sm-4 col-6" v-for="video in videos" :key="video.id">
                 <MediaCardItem :media="video" :downloadable="true" :mediaType="'video'" />
             </div>
         </div>