fix some scroller issues on mobile devices

src/components/cardbuilder/card.css

@@ -36,6 +36,16 @@ button {
     margin-right: -0.6em;
 }
 
+/* TODO replace this with a proper fix */
+/* doesnt work on mobile devices */
+/* negative margin fixes annoying misalignment with cards and title */
+@media all and (max-width:50em) {
+    .itemsContainer {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
 .vertical-list {
     display: flex;
     flex-direction: column;

src/components/emby-scrollbuttons/emby-scrollbuttons.css

@@ -1,12 +1,3 @@
-.emby-scroller-container {
-    position: relative;
-}
-
-.emby-scroller {
-    margin-left: 4em;
-    margin-right: 4em;
-}
-
 .emby-scrollbuttons {
     position: absolute;
     top: 0;

src/components/emby-scroller/emby-scroller.css

@@ -0,0 +1,17 @@
+.emby-scroller-container {
+    position: relative;
+}
+
+.emby-scroller {
+    margin-left: 3.3%;
+    margin-right: 3.3%;
+}
+
+@media all and (max-width:50em) {
+    .emby-scroller {
+        padding-left: 3.3%;
+        padding-right: 3.3%;
+        margin-left: 0;
+        margin-right: 0;
+    }
+}

src/components/emby-scroller/emby-scroller.js

@@ -1,4 +1,4 @@
-define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) {
+define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) {
     'use strict';
 
     var ScrollerPrototype = Object.create(HTMLDivElement.prototype);

src/components/themes/dark/theme.css

@@ -19,10 +19,10 @@ html {
     background-color: #101010
 }
 
-.skinHeader .semiTransparent {
+.skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.4);
 }
 
 .pageTitleWithDefaultLogo {

src/components/themes/emby/theme.css

@@ -19,10 +19,10 @@ html {
     background-color: #1f1f1f
 }
 
-.skinHeader .semiTransparent {
+.skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.4);
 }
 
 .pageTitleWithDefaultLogo {

src/components/themes/light/theme.css

@@ -32,10 +32,10 @@ html {
     box-shadow: none !important
 }
 
-.skinHeader .semiTransparent {
+.skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.4);
 }
 
 .pageTitleWithDefaultLogo {