diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index f935cffd6..52ae2ce81 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -17,13 +17,19 @@
     display: flex;
 }
 
-.verticalItemsContainer {
+.vertical-list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+.vertical-wrap {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }
 
-    .verticalItemsContainer .card {
+    .vertical-wrap .card {
         contain: strict;
     }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
index 42192ee8c..0aea438f4 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@@ -248,7 +248,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                         }
                         html += '<' + sectionTitleTagName + ' class="sectionTitle">' + newIndexValue + '</' + sectionTitleTagName + '>';
                         if (isVertical) {
-                            html += '<div class="itemsContainer verticalItemsContainer">';
+                            html += '<div class="itemsContainer vertical-wrap">';
                         }
                         currentIndexValue = newIndexValue;
                         hasOpenSection = true;
diff --git a/dashboard-ui/channelitems.html b/dashboard-ui/channelitems.html
index 18ca0c9b9..50ad9fcd0 100644
--- a/dashboard-ui/channelitems.html
+++ b/dashboard-ui/channelitems.html
@@ -6,7 +6,7 @@
             <div class="paging">
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap" style="text-align:center;"></div>
         <div class="paging">
         </div>
     </div>
diff --git a/dashboard-ui/channels.html b/dashboard-ui/channels.html
index a8a0cfacf..049b89f7c 100644
--- a/dashboard-ui/channels.html
+++ b/dashboard-ui/channels.html
@@ -10,7 +10,7 @@
     <div class="pageTabContent ehsContent" id="channelsTab" data-index="1">
         <div class="viewSettings">
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap" style="text-align:center;"></div>
     </div>
 
     <div data-role="content">
diff --git a/dashboard-ui/components/favoriteitems.js b/dashboard-ui/components/favoriteitems.js
index ae2e8898d..6346c7402 100644
--- a/dashboard-ui/components/favoriteitems.js
+++ b/dashboard-ui/components/favoriteitems.js
@@ -85,7 +85,7 @@
                 if (enableScrollX()) {
                     html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
                 }
 
                 html += cardBuilder.getCardsHtml(result.Items, {
diff --git a/dashboard-ui/home.html b/dashboard-ui/home.html
index 6f7fecd56..8cb01e420 100644
--- a/dashboard-ui/home.html
+++ b/dashboard-ui/home.html
@@ -25,7 +25,7 @@
                     <span>${ButtonSync}</span>
                 </button>
             </div>
-            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer verticalItemsContainer">
+            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer vertical-wrap">
             </div>
         </div>
         <p class="noNextUpItems hide">${NoNextUpItemsMessage}</p>
diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html
index 1a7cb1edc..e5e4d3a88 100644
--- a/dashboard-ui/livetv.html
+++ b/dashboard-ui/livetv.html
@@ -52,7 +52,7 @@
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer verticalItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap"></div>
     </div>
     <div class="pageTabContent ehsContent" id="recordingsTab" data-index="3">
         <div id="activeRecordings" class="homePageSection hide">
diff --git a/dashboard-ui/livetvitems.html b/dashboard-ui/livetvitems.html
index 51c64d142..26369026a 100644
--- a/dashboard-ui/livetvitems.html
+++ b/dashboard-ui/livetvitems.html
@@ -4,7 +4,7 @@
         <div class="viewSettings">
             <div class="listTopPaging"></div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap"></div>
     </div>
 
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index 04669ac6b..74e16f50d 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -98,14 +98,14 @@
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap"></div>
     </div>
     <div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align: center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap" style="text-align: center;"></div>
     </div>
 
     <div data-role="content">
diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html
index 922baaf45..4856697aa 100644
--- a/dashboard-ui/music.html
+++ b/dashboard-ui/music.html
@@ -115,7 +115,7 @@
             <div class="paging"></div>
         </div>
 
-        <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker verticalItemsContainer">
+        <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker vertical-wrap">
         </div>
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
diff --git a/dashboard-ui/scripts/homeupcoming.js b/dashboard-ui/scripts/homeupcoming.js
index a887964e9..585f76a10 100644
--- a/dashboard-ui/scripts/homeupcoming.js
+++ b/dashboard-ui/scripts/homeupcoming.js
@@ -102,7 +102,7 @@
             if (enableScrollX()) {
                 html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
             } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
             }
 
             html += cardBuilder.getCardsHtml({
diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js
index 1e4660f42..85b011ed5 100644
--- a/dashboard-ui/scripts/livetvsuggested.js
+++ b/dashboard-ui/scripts/livetvsuggested.js
@@ -130,10 +130,10 @@
             for (var i = 0, length = containers.length; i < length; i++) {
                 if (enableScrollX()) {
                     containers[i].classList.add('hiddenScrollX');
-                    containers[i].classList.remove('verticalItemsContainer');
+                    containers[i].classList.remove('vertical-wrap');
                 } else {
                     containers[i].classList.remove('hiddenScrollX');
-                    containers[i].classList.add('verticalItemsContainer');
+                    containers[i].classList.add('vertical-wrap');
                 }
             }
         };
diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js
index 246d40581..f5adf2b82 100644
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@@ -107,7 +107,7 @@
         if (enableScrollX()) {
             html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
         } else {
-            html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
         }
 
         html += cardBuilder.getCardsHtml(recommendation.Items, {
@@ -161,10 +161,10 @@
         for (var i = 0, length = containers.length; i < length; i++) {
             if (enableScrollX()) {
                 containers[i].classList.add('hiddenScrollX');
-                containers[i].classList.remove('verticalItemsContainer');
+                containers[i].classList.remove('vertical-wrap');
             } else {
                 containers[i].classList.remove('hiddenScrollX');
-                containers[i].classList.add('verticalItemsContainer');
+                containers[i].classList.add('vertical-wrap');
             }
         }
     }
diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js
index 768fde550..5724a19b6 100644
--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@@ -86,7 +86,7 @@
                 shape: getSquareShape(),
                 showTitle: true,
                 showParentTitle: true,
-                defaultAction: 'instantmix',
+                action: 'instantmix',
                 lazy: true,
                 centerText: true,
                 overlayMoreButton: true
@@ -132,7 +132,7 @@
                 shape: getSquareShape(),
                 showTitle: true,
                 showParentTitle: true,
-                defaultAction: 'instantmix',
+                action: 'instantmix',
                 lazy: true,
                 centerText: true,
                 overlayMoreButton: true
@@ -255,10 +255,10 @@
             for (var i = 0, length = containers.length; i < length; i++) {
                 if (enableScrollX()) {
                     containers[i].classList.add('hiddenScrollX');
-                    containers[i].classList.remove('verticalItemsContainer');
+                    containers[i].classList.remove('vertical-wrap');
                 } else {
                     containers[i].classList.remove('hiddenScrollX');
-                    containers[i].classList.add('verticalItemsContainer');
+                    containers[i].classList.add('vertical-wrap');
                 }
             }
         };
diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js
index 20632c078..3b9e54f23 100644
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@@ -302,7 +302,7 @@
 
                 html += '</div>';
 
-                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
 
                 html += cardBuilder.getCardsHtml({
                     items: items,
@@ -348,7 +348,7 @@
                 if (scrollX) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
                 }
                 html += cardBuilder.getCardsHtml({
                     items: items,
@@ -390,7 +390,7 @@
                 if (scrollX) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
                 }
 
                 html += cardBuilder.getCardsHtml({
@@ -429,7 +429,7 @@
 
             if (result.Items.length) {
                 html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
-                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
 
                 html += cardBuilder.getCardsHtml({
                     items: result.Items,
@@ -474,7 +474,7 @@
                 if (scrollX) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
                 }
                 html += cardBuilder.getCardsHtml({
                     items: items,
@@ -533,7 +533,7 @@
                 if (enableScrollX()) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
                 }
                 html += cardBuilder.getCardsHtml({
                     items: result.Items,
@@ -577,7 +577,7 @@
                 if (enableScrollX()) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
                 }
                 html += cardBuilder.getCardsHtml({
                     items: result.Items,
@@ -657,7 +657,7 @@
                 html += '<a href="channelitems.html?id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><button is="emby-button" type="button" class="raised more mini"><span>' + Globalize.translate('ButtonMore') + '</span></button></a>';
                 html += '</div>';
 
-                html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
                 html += cardBuilder.getCardsHtml({
                     items: result.Items,
                     shape: 'autohome',
@@ -705,7 +705,7 @@
             if (enableScrollX()) {
                 html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
             } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
             }
             html += cardBuilder.getCardsHtml({
                 items: result.Items,
diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js
index 18909e65b..31210758f 100644
--- a/dashboard-ui/scripts/tvrecommended.js
+++ b/dashboard-ui/scripts/tvrecommended.js
@@ -111,10 +111,10 @@
 
             if (enableScrollX()) {
                 resumableItemsContainer.classList.add('hiddenScrollX');
-                resumableItemsContainer.classList.remove('verticalItemsContainer');
+                resumableItemsContainer.classList.remove('vertical-wrap');
             } else {
                 resumableItemsContainer.classList.remove('hiddenScrollX');
-                resumableItemsContainer.classList.add('verticalItemsContainer');
+                resumableItemsContainer.classList.add('vertical-wrap');
             }
 
             categorysyncbuttons.init(tabContent);
diff --git a/dashboard-ui/scripts/tvupcoming.js b/dashboard-ui/scripts/tvupcoming.js
index 2acf47626..e5a5265df 100644
--- a/dashboard-ui/scripts/tvupcoming.js
+++ b/dashboard-ui/scripts/tvupcoming.js
@@ -104,7 +104,7 @@
             if (enableScrollX()) {
                 html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
             } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
             }
 
             html += cardBuilder.getCardsHtml({
diff --git a/dashboard-ui/secondaryitems.html b/dashboard-ui/secondaryitems.html
index 703ea68e8..e128feec7 100644
--- a/dashboard-ui/secondaryitems.html
+++ b/dashboard-ui/secondaryitems.html
@@ -5,7 +5,7 @@
             <div class="listTopPaging">
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap" style="text-align:center;"></div>
     </div>
 
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/tv.html b/dashboard-ui/tv.html
index 2921ef4b9..5c04ffce5 100644
--- a/dashboard-ui/tv.html
+++ b/dashboard-ui/tv.html
@@ -34,7 +34,7 @@
                     <span>${ButtonSync}</span>
                 </button>
             </div>
-            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer verticalItemsContainer">
+            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer vertical-wrap">
             </div>
         </div>
         <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
@@ -48,7 +48,7 @@
                     <span>${ButtonSync}</span>
                 </button>
             </div>
-            <div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer verticalItemsContainer">
+            <div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer vertical-wrap">
             </div>
         </div>
     </div>
@@ -86,7 +86,7 @@
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
-        <div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">
+        <div is="emby-itemscontainer" class="itemsContainer vertical-wrap">
         </div>
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
@@ -96,14 +96,14 @@
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap"></div>
     </div>
     <div class="pageTabContent ehsContent" id="studiosTab" data-index="6">
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align: center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap" style="text-align: center;"></div>
     </div>
 
     <div data-role="content">