Merge pull request #6425 from bernarden/bugfix/6422-unsupported-max-css-function-in-chrome-76

src/components/alphaPicker/style.scss

@@ -1,3 +1,5 @@
+@import '../../styles/mixins';
+
 .alphaPicker {
     text-align: center;
     display: flex;
@@ -11,8 +13,8 @@
 
 .alphaPicker-fixed {
     position: fixed;
-    bottom: 5.5em;
+
-    bottom: max(env(safe-area-inset-bottom), 5.5em);
+    @include conditional-max(bottom, 5.5em, env(safe-area-inset-bottom));
 }
 
 .alphaPickerRow {
@@ -45,8 +47,7 @@
 
 @media all and (max-height: 50em) {
     .alphaPicker-fixed {
-        bottom: 5em;
+        @include conditional-max(bottom, 5em, env(safe-area-inset-bottom));
-        bottom: max(env(safe-area-inset-bottom), 5em);
     }
 
     .alphaPickerButton-vertical {
@@ -105,32 +106,27 @@
 }
 
 .alphaPicker-fixed.alphaPicker-tv {
-    bottom: 1%;
+    @include conditional-max(bottom, 1%, env(safe-area-inset-bottom));
-    bottom: max(env(safe-area-inset-bottom), 1%);
 }
 
 .alphaPicker-fixed-right {
     [dir="ltr"] & {
-        right: 0.4em;
+        @include conditional-max(right, 0.4em, env(safe-area-inset-right));
-        right: max(env(safe-area-inset-right), 0.4em);
     }
 
     [dir="rtl"] & {
-        left: 0.4em;
+        @include conditional-max(left, 0.4em, env(safe-area-inset-left));
-        left: max(env(safe-area-inset-left), 0.4em);
     }
 }
 
 @media all and (min-width: 62.5em) {
     .alphaPicker-fixed-right {
         [dir="ltr"] & {
-            right: 1em;
+            @include conditional-max(right, 1em, env(safe-area-inset-right));
-            right: max(env(safe-area-inset-right), 1em);
         }
 
         [dir="rtl"] & {
-            left: 1em;
+            @include conditional-max(left, 1em, env(safe-area-inset-left));
-            left: max(env(safe-area-inset-left), 1em);
         }
     }
 }

src/components/multiSelect/multiSelect.scss

@@ -1,3 +1,4 @@
+@import '../../styles/mixins';
 
 .itemSelectionPanel {
     position: absolute;
@@ -14,16 +15,14 @@
     top: 0;
     left: 0;
     right: 0;
-    padding-left: 0.5em;
-    padding-left: max(env(safe-area-inset-left), 0.5em);
-    padding-right: 0.5em;
-    padding-right: max(env(safe-area-inset-right), 0.5em);
-    padding-top: 1em;
-    padding-top: max(env(safe-area-inset-top), 1em);
     padding-bottom: 1em;
     display: flex;
     align-items: center;
     z-index: 99999;
+
+    @include conditional-max(padding-left, 0.5em, env(safe-area-inset-left));
+    @include conditional-max(padding-right, 0.5em, env(safe-area-inset-right));
+    @include conditional-max(padding-top, 1em, env(safe-area-inset-top));
 }
 
 .itemSelectionCount {

src/components/remotecontrol/remotecontrol.scss

@@ -1,3 +1,5 @@
+@import '../../styles/mixins';
+
 .nowPlayingPage {
     padding: 5em 0 0 0 !important;
 }
@@ -184,11 +186,10 @@
     left: 0;
     height: 4.2em;
     right: 0;
-    padding-left: 7.3%;
-    padding-left: max(env(safe-area-inset-left), 7.3%);
-    padding-right: 7.3%;
-    padding-right: max(env(safe-area-inset-right), 7.3%);
     padding-bottom: env(safe-area-inset-bottom);
+
+    @include conditional-max(padding-left, 7.3%, env(safe-area-inset-left));
+    @include conditional-max(padding-right, 7.3%, env(safe-area-inset-right));
 }
 
 .layout-desktop .playlistSectionButton,

src/components/toast/toast.scss

@@ -1,17 +1,18 @@
+@import '../../styles/mixins';
+
 .toastContainer {
     position: fixed;
     bottom: 0;
     pointer-events: none;
     z-index: 9999999;
-    padding-left: 1em;
-    padding-left: max(env(safe-area-inset-left), 1em);
     padding-right: 1em;
     padding-top: 1em;
-    padding-bottom: 1em;
-    padding-bottom: max(env(safe-area-inset-bottom), 1em);
     display: flex;
     flex-direction: column;
 
+    @include conditional-max(padding-left, 1em, env(safe-area-inset-left));
+    @include conditional-max(padding-bottom, 1em, env(safe-area-inset-bottom));
+
     [dir="ltr"] & {
         left: 0;
     }

src/elements/emby-scroller/emby-scroller.scss

@@ -1,12 +1,12 @@
+@import '../../styles/mixins';
+
 .emby-scroller-container {
     position: relative;
 }
 
 .emby-scroller {
-    padding-left: 3.3%;
+    @include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
-    padding-left: max(env(safe-area-inset-left), 3.3%);
+    @include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
-    padding-right: 3.3%;
-    padding-right: max(env(safe-area-inset-right), 3.3%);
 }
 
 .servers > .card > .cardBox {

src/styles/_mixins.scss

@@ -0,0 +1,12 @@
+// This mixin is used to provide a fallback for `max()` function in older browsers
+// (e.g. Chrome 76 that is found in devices like Samsung 2021 TVs). The mixin ensures
+// a default value is applied to a property while using `max()` only if supported.
+@mixin conditional-max($property, $default, $max-value) {
+    & {
+        #{$property}: $default;
+    }
+
+    @supports (width: max(1px, 1px)) {
+        #{$property}: max($max-value, $default);
+    }
+}

src/styles/librarybrowser.scss

@@ -1,3 +1,5 @@
+@import 'mixins';
+
 // The padding of the header content on mobile needs to be adjusted
 // based on the size of the poster card (values from card.scss)
 @mixin header-poster-padding() {
@@ -1353,25 +1355,21 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 
 .padded-left {
     [dir="ltr"] & {
-        padding-left: 3.3%;
+        @include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
-        padding-left: max(env(safe-area-inset-left), 3.3%);
     }
 
     [dir="rtl"] & {
-        padding-right: 3.3%;
+        @include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
-        padding-right: max(env(safe-area-inset-right), 3.3%);
     }
 }
 
 .padded-right {
     [dir="ltr"] & {
-        padding-right: 3.3%;
+        @include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
-        padding-right: max(env(safe-area-inset-right), 3.3%);
     }
 
     [dir="rtl"] & {
-        padding-left: 3.3%;
+        @include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
-        padding-left: max(env(safe-area-inset-left), 3.3%);
     }
 }
 
@@ -1395,13 +1393,11 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 
 @media all and (min-height: 31.25em) {
     [dir="ltr"] .padded-right-withalphapicker {
-        padding-right: 7.5%;
+        @include conditional-max(padding-right, 7.5%, env(safe-area-inset-right));
-        padding-right: max(env(safe-area-inset-right), 7.5%);
     }
 
     [dir="rtl"] .padded-right-withalphapicker {
-        padding-left: 7.5%;
+        @include conditional-max(padding-left, 7.5%, env(safe-area-inset-left));
-        padding-left: max(env(safe-area-inset-left), 7.5%);
     }
 }
 

src/styles/videoosd.scss

@@ -1,3 +1,5 @@
+@import 'mixins';
+
 .chapterThumbTextContainer,
 .videoOsdBottom {
     user-select: none;
@@ -12,8 +14,6 @@
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
     padding-top: 7.5em;
-    padding-bottom: 1.75em;
-    padding-bottom: max(env(safe-area-inset-bottom), 1.75em);
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -23,6 +23,8 @@
     user-select: none;
     -webkit-touch-callout: none;
     pointer-events: none;
+
+    @include conditional-max(padding-bottom, 1.75em, env(safe-area-inset-bottom));
 }
 
 .skinHeader-withBackground.osdHeader {