feat: improve mobile design

src/App/styles.less

@@ -85,13 +85,19 @@ svg {
 }
 
 html {
-    width: 100%;
+    width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))";
-    height: 100%;
+    height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))";
     min-width: 640px;
     min-height: 480px;
     font-family: 'PlusJakartaSans', 'sans-serif';
     overflow: auto;
     overscroll-behavior: none;
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+
+    // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp
+    --calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))";
 
     body {
         width: 100%;

src/common/Button/styles.less

@@ -8,6 +8,8 @@
     outline-offset: calc(-1 * var(--focus-outline-size));
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
+    -webkit-touch-callout: none;
+    touch-callout: none;
 
     &:focus {
         outline-style: solid;

src/common/MainNavBars/styles.less

@@ -5,6 +5,11 @@
 .main-nav-bars-container {
     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));
+    height: 100%;
 
     .horizontal-nav-bar {
         position: absolute;
@@ -17,18 +22,32 @@
     .vertical-nav-bar {
         position: absolute;
         top: var(--horizontal-nav-bar-size);
-        bottom: 0;
+        bottom: var(--calculated-bottom-safe-inset);
         left: 0;
         z-index: 1;
     }
 
     .nav-content-container {
         position: absolute;
-        top: var(--horizontal-nav-bar-size);
+        padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
+        top: 0;
         right: 0;
         bottom: 0;
         left: var(--vertical-nav-bar-size);
         z-index: 0;
+        overflow: scroll;
+
+        --top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
+        --bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px));
+        --overlap-size: 3rem;
+        --transparency-grandient-pad: 6rem;
+
+        mask: linear-gradient(
+            to bottom,
+            transparent calc(var(--top-overlay-size) - var(--overlap-size)),
+            black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
+            black 100%
+        );
     }
 }
 
@@ -36,7 +55,15 @@
     .main-nav-bars-container {
         .nav-content-container {
             left: 0;
-            bottom: var(--vertical-nav-bar-size);
+            padding-bottom: var(--vertical-nav-bar-size);
+
+            mask: linear-gradient(
+                to bottom,
+                transparent calc(var(--top-overlay-size) - var(--overlap-size)),
+                black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
+                black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)),
+                transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size))
+            );
         }
 
         .vertical-nav-bar {

src/common/NavBar/HorizontalNavBar/styles.less

@@ -12,6 +12,8 @@
     padding-right: 1rem;
     background-color: transparent;
     overflow: visible;
+    padding-top: env(safe-area-inset-top,0px);
+    box-sizing: content-box;
 
     .logo-container {
         flex: none;
@@ -32,7 +34,7 @@
     }
 
     .back-button-container {
-        margin-left: 1rem;
+        margin-left: max(0px, calc(1rem - env(safe-area-inset-left, 0px)));
     }
 
     .title {

src/common/StreamingServerWarning/styles.less

@@ -6,8 +6,11 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 1rem;
     background-color: @color-accent5-dark3;
+    padding: 1rem;
+    border-radius: 8px;
+    margin: 0px 8px;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48), 0px 8px 48px rgba(0, 0, 0, 0.64);
 
     .warning-statement {
         flex: 1;
@@ -19,8 +22,12 @@
 
     .warning-button {
         flex: none;
-        margin-left: 1rem;
+        margin-left: 1.5rem;
         color: @color-surface-light5-90;
+        background-color: rgba(0, 0, 0, 0.24);
+        padding: 8px 12px;
+        border-radius: 8px;
+        line-height: 18px;
 
         &:first-child {
             margin-left: 0;
@@ -50,7 +57,7 @@
         height: auto !important;
         text-align: center;
         .warning-statement {
-            margin-bottom: 0.5rem;
+            margin-bottom: 1rem;
             margin-right: 0;
         }
         .warning-button {

src/index.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, user-scalable=no, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Stremio">
     <link rel="icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/favicon.ico">

src/routes/Addons/styles.less

@@ -22,17 +22,39 @@
 }
 
 .addons-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 
     .addons-content {
+        --selectable-inputs-assumed-height: 84px;
+        --top-overlay-size: var(--selectable-inputs-assumed-height);
+        --bottom-vertical-nav-bar-size: 0px;
+        --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px));
+        --overlap-size: 3rem;
+        --transparency-grandient-pad: 6rem;
+
         width: 100%;
-        height: 100%;
+        height: calc(100% + var(--bottom-overlay-size));
+        margin-bottom: calc(var(--bottom-overlay-size) * -1);
         display: flex;
         flex-direction: column;
         align-self: stretch;
 
+        .addons-list-container {
+            margin-top: calc(var(--selectable-inputs-assumed-height) * -1);
+            padding: 0 1.5rem;
+            padding-top: var(--selectable-inputs-assumed-height);
+            padding-bottom: var(--bottom-overlay-size, 0px);
+
+            mask: linear-gradient(
+                to bottom,
+                transparent calc(var(--top-overlay-size) - var(--overlap-size)),
+                black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
+                black 100%
+            );
+            z-index: 1;
+        }
+
         .selectable-inputs-container {
             flex: none;
             align-self: stretch;
@@ -41,6 +63,7 @@
             justify-content: space-between;
             padding: 1.5rem;
             overflow: visible;
+            z-index: 2;
 
             .add-button-container {
                 flex: none;
@@ -53,6 +76,7 @@
                 padding: 0 1.5rem;
                 border-radius: 3rem;
                 background-color: var(--secondary-accent-color);
+                z-index: 3;
 
                 &:hover {
                     outline: var(--focus-outline-size) solid var(--secondary-accent-color);
@@ -133,7 +157,6 @@
         .addons-list-container {
             flex: 1;
             align-self: stretch;
-            padding: 0 1.5rem;
             overflow-y: auto;
 
             .addon {
@@ -278,6 +301,8 @@
 @media only screen and (max-width: @minimum) {
     .addons-container {
         .addons-content {
+            --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size);
+
             .selectable-inputs-container {
                 .add-button-container {
                     z-index: 1;

src/routes/Board/styles.less

@@ -24,7 +24,6 @@
 
         .board-content {
             width: 100%;
-            height: 100%;
             padding: 0 1rem;
             overflow-y: auto;
 
@@ -38,6 +37,7 @@
     .board-warning-container {
         flex: none;
         align-self: stretch;
+        margin-bottom: var(--calculated-bottom-safe-inset, 0px);
     }
 }
 
@@ -191,15 +191,7 @@
         z-index: 0;
 
         .board-content-container {
-            &:only-child {
-                .board-content {
-                    height: 100%;
-                }
-            }
-            
             .board-content {
-                height: calc(100% - 4rem);
-
                 .board-row {
                     margin-bottom: 1.5rem;
                 }
@@ -226,8 +218,9 @@
             position: absolute;
             left: 0;
             right: 0;
-            bottom: var(--vertical-nav-bar-size);
+            bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px));
             height: 4rem;
+            margin-bottom: 0px;
         }
     }
 }

src/routes/Discover/styles.less

@@ -17,13 +17,20 @@
 }
 
 .discover-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 
     .discover-content {
+        --selectable-inputs-assumed-height: 84px;
+        --top-overlay-size: var(--selectable-inputs-assumed-height);
+        --bottom-vertical-nav-bar-size: 0px;
+        --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px));
+        --overlap-size: 3rem;
+        --transparency-grandient-pad: 6rem;
+
         width: 100%;
-        height: 100%;
+        height: calc(100% + var(--bottom-overlay-size));
+        margin-bottom: calc(var(--bottom-overlay-size) * -1);
         display: flex;
         flex-direction: row;
 
@@ -33,6 +40,21 @@
             display: flex;
             flex-direction: column;
 
+            .meta-items-container {
+                margin-top: calc(var(--selectable-inputs-assumed-height) * -1);
+                padding: 0 1.5rem;
+                padding-top: var(--selectable-inputs-assumed-height);
+                padding-bottom: var(--bottom-overlay-size, 0px);
+    
+                mask: linear-gradient(
+                    to bottom,
+                    transparent calc(var(--top-overlay-size) - var(--overlap-size)),
+                    black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
+                    black 100%
+                );
+                z-index: 1;
+            }
+
             .selectable-inputs-container {
                 flex: none;
                 align-self: stretch;
@@ -40,6 +62,7 @@
                 flex-direction: row;
                 padding: 1.5rem;
                 overflow: visible;
+                z-index: 2;
 
                 .select-input {
                     flex: 0 1 15rem;
@@ -162,7 +185,6 @@
                 align-items: center;
                 grid-gap: 0.5rem;
                 margin-right: 1.5rem;
-                padding: 0 1.5rem;
                 overflow-y: auto;
 
                 .meta-item-placeholder {
@@ -348,6 +370,8 @@
 @media only screen and (max-width: @minimum) {
     .discover-container {
         .discover-content {
+            --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size);
+
             .catalog-container {
                 .selectable-inputs-container {
                     justify-content: space-between;

src/routes/Library/styles.less

@@ -13,16 +13,38 @@
 }
 
 .library-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 
     .library-content {
+        --selectable-inputs-assumed-height: 80px;
+        --top-overlay-size: var(--selectable-inputs-assumed-height);
+        --bottom-vertical-nav-bar-size: 0px;
+        --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px));
+        --overlap-size: 3rem;
+        --transparency-grandient-pad: 6rem;
+
         width: 100%;
-        height: 100%;
+        height: calc(100% + var(--bottom-overlay-size));
+        margin-bottom: calc(var(--bottom-overlay-size) * -1);
         display: flex;
         flex-direction: column;
 
+        .meta-items-container {
+            margin-top: calc(var(--selectable-inputs-assumed-height) * -1);
+            padding: 0 1.5rem;
+            padding-top: var(--selectable-inputs-assumed-height);
+            padding-bottom: var(--bottom-overlay-size, 0px);
+
+            mask: linear-gradient(
+                to bottom,
+                transparent calc(var(--top-overlay-size) - var(--overlap-size)),
+                black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
+                black 100%
+            );
+            z-index: 1;
+        }
+
         .selectable-inputs-container {
             flex: none;
             align-self: stretch;
@@ -30,6 +52,7 @@
             flex-direction: row;
             padding: 1.5rem;
             overflow: visible;
+            z-index: 2;
 
             .select-input-container {
                 flex-grow: 0;
@@ -119,7 +142,6 @@
             grid-auto-rows: max-content;
             align-items: center;
             grid-gap: 0.5rem;
-            padding: 0 1.5rem;
             overflow-y: auto;
         }
     }
@@ -216,6 +238,8 @@
 @media only screen and (max-width: @minimum) {
     .library-container {
         .library-content {
+            --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size);
+
             .selectable-inputs-container {
                 justify-content: space-between;
             }

src/routes/MetaDetails/styles.less

@@ -17,6 +17,9 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    padding-left: env(safe-area-inset-left, 0px);
+    padding-right: env(safe-area-inset-right, 0px);
+    box-sizing: border-box;
 
     .nav-bar {
         z-index: 1;
@@ -91,6 +94,8 @@
             flex: 0 1 auto;
             align-self: stretch;
             padding: 0 4rem 2rem 4rem;
+
+            padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0px)));
         }
 
         .spacing {

src/routes/Settings/styles.less

@@ -13,13 +13,11 @@
 }
 
 .settings-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 
     .settings-content {
         width: 100%;
-        height: 100%;
         display: flex;
         flex-direction: row;