Merge pull request #808 from Stremio/fix/PWA-height-width-global-bugs

PWA: Fix mobile devices style issues

Author: kKaskak

src/App/styles.less

@@ -23,8 +23,8 @@
 // HTML sizes
 @html-width: ~"calc(max(var(--small-viewport-width), var(--dynamic-viewport-width)))";
 @html-height: ~"calc(max(var(--small-viewport-height), var(--dynamic-viewport-height)))";
-@html-standalone-width: ~"calc(max(100%, var(--large-viewport-width)))";
-@html-standalone-height: ~"calc(max(100%, var(--large-viewport-height)))";
+@html-standalone-width: ~"calc(max(100%, var(--small-viewport-width)))";
+@html-standalone-height: ~"calc(max(100%, var(--small-viewport-height)))";
 
 // Safe area insets
 @safe-area-inset-top: env(safe-area-inset-top, 0rem);
@@ -64,7 +64,6 @@
     --modal-background-color: rgba(15, 13, 32, 1);
     --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
     --border-radius: 0.75rem;
-    --calculated-bottom-safe-inset: @calculated-bottom-safe-inset;
     --top-overlay-size: @top-overlay-size;
     --bottom-overlay-size: @bottom-overlay-size;
     --overlap-size: @overlap-size;
@@ -99,6 +98,10 @@
     @supports (height: 100lvh) and (height: 100svh) {
         --viewport-height-diff: calc(100lvh - 100svh);
     }
+
+    @media (display-mode: standalone) {
+        --safe-area-inset-bottom: @calculated-bottom-safe-inset;
+    }
 }
 
 * {
@@ -174,7 +177,7 @@ html {
                 position: absolute;
                 top: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
                 right: var(--safe-area-inset-right);
-                bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem));
+                bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-bottom, 0rem));
                 left: auto;
                 z-index: 1;
                 padding: 0 calc(0.5 * var(--horizontal-nav-bar-size));

src/components/BottomSheet/BottomSheet.less

@@ -101,7 +101,7 @@
 @media only screen and (orientation: landscape) {
     .bottom-sheet {
         .container {
-            max-width: 90%;
+            max-width: calc(90% - var(--safe-area-inset-left) - var(--safe-area-inset-right));
         }
     }
 }

src/components/MainNavBars/MainNavBars.less

@@ -6,9 +6,9 @@
     position: relative;
     z-index: 0;
     overflow: clip;
-    margin-left: env(safe-area-inset-left, 0px);
-    margin-right: env(safe-area-inset-right, 0px);
-    width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
+    margin-left: var(--safe-area-inset-left);
+    margin-right: var(--safe-area-inset-right);
+    width: calc(100% - var(--safe-area-inset-left) - var(--safe-area-inset-right));
     height: 100%;
 
     .horizontal-nav-bar {
@@ -22,14 +22,14 @@
     .vertical-nav-bar {
         position: absolute;
         top: var(--horizontal-nav-bar-size);
-        bottom: var(--calculated-bottom-safe-inset);
+        bottom: 0;
         left: 0;
         z-index: 1;
     }
 
     .nav-content-container {
         position: absolute;
-        padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
+        padding-top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
         top: 0;
         right: 0;
         bottom: 0;

src/routes/Addons/styles.less

@@ -22,7 +22,7 @@
 }
 
 .addons-container {
-    height: 100%;
+    height: calc(100% - var(--safe-area-inset-bottom));
     background-color: transparent;
 
     .addons-content {

src/routes/Board/styles.less

@@ -13,7 +13,7 @@
 
 .board-container {
     width: 100%;
-    height: 100%;
+    height: calc(100% - var(--safe-area-inset-bottom));
     display: flex;
     flex-direction: column;
 

src/routes/Calendar/Calendar.less

@@ -3,8 +3,7 @@
 @import (reference) '~stremio/common/screen-sizes.less';
 
 .calendar {
-    width: 100%;
-    height: 100%;
+    height: calc(100% - var(--safe-area-inset-bottom));
     background-color: transparent;
 
     .content {

src/routes/Discover/styles.less

@@ -17,7 +17,7 @@
 }
 
 .discover-container {
-    height: 100%;
+    height: calc(100% - var(--safe-area-inset-bottom));
     background-color: transparent;
 
     .discover-content {

src/routes/Library/styles.less

@@ -13,7 +13,7 @@
 }
 
 .library-container {
-    height: 100%;
+    height: calc(100% - var(--safe-area-inset-bottom));
     background-color: transparent;
 
     .library-content {

src/routes/MetaDetails/styles.less

@@ -52,7 +52,7 @@
         flex-direction: row;
         margin-top: calc(var(--top-overlay-size) * -1);
         padding-top: var(--top-overlay-size);
-        padding-bottom: var(--calculated-bottom-safe-inset, 0rem);
+        padding-bottom: var(--safe-area-inset-bottom, 0rem);
         .vertical-nav-bar {
             flex: none;
         }

src/routes/Settings/styles.less

@@ -13,7 +13,7 @@
 }
 
 .settings-container {
-    height: 100%;
+    height: calc(100% - var(--safe-area-inset-bottom));
     width: 100%;
     background-color: transparent;