From fe895d4a36c73a261708cf34fe25944b1d448864 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Wed, 23 Feb 2022 21:04:11 +0300
Subject: [PATCH 1/4] fix: Fix vertical button alignment in Safari 10

Using `position: absolute` breaks Flexbox.
---
 src/components/remotecontrol/remotecontrol.scss | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss
index aa1823fc3f..38595b6c38 100644
--- a/src/components/remotecontrol/remotecontrol.scss
+++ b/src/components/remotecontrol/remotecontrol.scss
@@ -81,8 +81,6 @@
     -webkit-box-align: center;
     -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
 }
@@ -321,6 +319,8 @@
         -webkit-justify-content: center;
         justify-content: center;
         font-size: 1.5em;
+        margin-left: -0.5em;
+        margin-right: -0.5em;
     }
 
     .nowPlayingPageImageContainer {
@@ -372,19 +372,15 @@
 
     .nowPlayingInfoButtons .btnRepeat,
     .nowPlayingInfoButtons .btnRewind {
-        position: absolute;
-        left: 0;
         margin-left: 0;
-        padding-left: 7.3%;
+        margin-right: auto;
         font-size: smaller;
     }
 
     .nowPlayingInfoButtons .btnShuffleQueue,
     .nowPlayingInfoButtons .btnFastForward {
-        position: absolute;
-        right: 0;
+        margin-left: auto;
         margin-right: 0;
-        padding-right: 7.3%;
         font-size: smaller;
     }
 

From 20a543750627cf487a231b7a5b5011b1f7756dc3 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Wed, 23 Feb 2022 21:43:02 +0300
Subject: [PATCH 2/4] refactor: Remove unnecessary flexbox

---
 src/components/remotecontrol/remotecontrol.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss
index 38595b6c38..9f7d9f9487 100644
--- a/src/components/remotecontrol/remotecontrol.scss
+++ b/src/components/remotecontrol/remotecontrol.scss
@@ -273,9 +273,7 @@
     .remoteControlContent {
         padding-left: 7.3% !important;
         padding-right: 7.3% !important;
-        display: flex;
         height: 100%;
-        flex-direction: column;
     }
 
     .layout-desktop .nowPlayingPageUserDataButtons {

From c4f81a9bdd185f1e0257636742781b3d4ad3dd45 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Mon, 28 Feb 2022 21:44:17 +0300
Subject: [PATCH 3/4] fix: Center card icon in Safari 10

---
 src/components/cardbuilder/card.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss
index 9d1946695c..5685c4f3d1 100644
--- a/src/components/cardbuilder/card.scss
+++ b/src/components/cardbuilder/card.scss
@@ -389,6 +389,10 @@ button::-moz-focus-inner {
     transform: translate(-50%, -50%);
 }
 
+.cardImageContainer .cardImageIcon {
+    margin: auto; /* 'justify-content: center' doesn't work in Safari 10 */
+}
+
 .cardIndicators {
     right: 0.225em;
     top: 0.225em;

From bce24b26ba33a02b635797b36df2852b445b6e53 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Mon, 28 Feb 2022 22:45:18 +0300
Subject: [PATCH 4/4] refactor: Remove unnecessary 'height'

It is better to use `flex-grow` to grow the element.
---
 src/components/remotecontrol/remotecontrol.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss
index 9f7d9f9487..6dc769e710 100644
--- a/src/components/remotecontrol/remotecontrol.scss
+++ b/src/components/remotecontrol/remotecontrol.scss
@@ -410,7 +410,6 @@
 
     .nowPlayingButtonsContainer {
         display: flex;
-        height: 100%;
         flex-direction: column;
     }
 }