respect safe areas

Stremio · Nov 1, 2023 · ea8a4c7 · ea8a4c7
1 parent aa236a2
commit ea8a4c7
Show file tree

Hide file tree

Showing 11 changed files with 9 additions and 11 deletions.
diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less
@@ -5,6 +5,7 @@
 .main-nav-bars-container {
     position: relative;
     z-index: 0;
+    margin: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
 
     .horizontal-nav-bar {
         position: absolute;
@@ -36,7 +37,7 @@
     .main-nav-bars-container {
         .nav-content-container {
             left: 0;
-            bottom: var(--vertical-nav-bar-size);
+            bottom: calc(var(--vertical-nav-bar-size) + env(safe-area-inset-bottom));
         }
 
         .vertical-nav-bar {

diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -9,7 +9,7 @@
     align-items: center;
     justify-content: space-between;
     height: var(--horizontal-nav-bar-size);
-    padding-right: 1rem;
+    padding-right: min(1rem, calc(1rem - env(safe-area-inset-right)));
     background-color: transparent;
     overflow: visible;
 

diff --git a/src/common/NavBar/VerticalNavBar/styles.less b/src/common/NavBar/VerticalNavBar/styles.less
@@ -36,9 +36,9 @@
         flex-direction: row;
         justify-content: space-between;
         gap: 0;
-        height: var(--vertical-nav-bar-size);
+        height: calc(var(--vertical-nav-bar-size) + env(safe-area-inset-bottom));
         width: 100%;
-        padding: 0 1rem;
+        padding: 0 1rem env(safe-area-inset-bottom) 1rem;
         overflow-y: hidden;
         overflow-x: auto;
 

diff --git a/src/index.html b/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, 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/png" sizes="96x96" href="<%= htmlWebpackPlugin.options.faviconsPath %>/icon-96.png">

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
@@ -22,7 +22,6 @@
 }
 
 .addons-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 

diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
@@ -226,7 +226,7 @@
             position: absolute;
             left: 0;
             right: 0;
-            bottom: var(--vertical-nav-bar-size);
+            bottom: calc(var(--vertical-nav-bar-size) + env(safe-area-inset-bottom));
             height: 4rem;
         }
     }

diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
@@ -24,7 +24,6 @@
 }
 
 .discover-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 

diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
@@ -20,7 +20,6 @@
 }
 
 .library-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 

diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
@@ -22,6 +22,7 @@
         z-index: 1;
         flex: none;
         align-self: stretch;
+        margin: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
     }
 
     .metadetails-content {
@@ -31,6 +32,7 @@
         z-index: 0;
         display: flex;
         flex-direction: row;
+        margin: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
 
         .vertical-nav-bar {
             --vertical-nav-bar-size: 6rem;

diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less
@@ -12,7 +12,6 @@
 }
 
 .search-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 

diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
@@ -18,7 +18,6 @@
 }
 
 .settings-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;