From 81be6592d6766efc7015b0f8111eeded1be06cfb Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Thu, 4 Jul 2019 00:27:42 -0700
Subject: [PATCH] fix some scroller issues on mobile devices

---
 src/components/cardbuilder/card.css             | 10 ++++++++++
 .../emby-scrollbuttons/emby-scrollbuttons.css   |  9 ---------
 src/components/emby-scroller/emby-scroller.css  | 17 +++++++++++++++++
 src/components/emby-scroller/emby-scroller.js   |  2 +-
 src/components/themes/dark/theme.css            |  4 ++--
 src/components/themes/emby/theme.css            |  4 ++--
 src/components/themes/light/theme.css           |  4 ++--
 7 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 src/components/emby-scroller/emby-scroller.css

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 755b417f5b..9a74085917 100644
--- a/src/components/cardbuilder/card.css
+++ b/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;
diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.css b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
index ac4f928098..168a6b3805 100644
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css
+++ b/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;
diff --git a/src/components/emby-scroller/emby-scroller.css b/src/components/emby-scroller/emby-scroller.css
new file mode 100644
index 0000000000..f060882f7b
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/emby-scroller/emby-scroller.js b/src/components/emby-scroller/emby-scroller.js
index df6e1beec8..0b36483be3 100644
--- a/src/components/emby-scroller/emby-scroller.js
+++ b/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);
diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css
index 749f817982..da4c056023 100644
--- a/src/components/themes/dark/theme.css
+++ b/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 {
diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css
index d02a49227b..d948c3ae6f 100644
--- a/src/components/themes/emby/theme.css
+++ b/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 {
diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css
index 60cd758e02..65ceefb52c 100644
--- a/src/components/themes/light/theme.css
+++ b/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 {