respect safe areas

edde746 · edde746 · commit ea8a4c7c3b5c · 2023-11-01T22:50:50.000+01:00
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;
 

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,6 @@`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.addons-container {`
`25`		`- width: 100%;`
`26`	`25`	`height: 100%;`
`27`	`26`	`background-color: transparent;`
`28`	`27`
Original file line number	Diff line number	Diff line change
`@@ -226,7 +226,7 @@`
`226`	`226`	`position: absolute;`
`227`	`227`	`left: 0;`
`228`	`228`	`right: 0;`
`229`		`- bottom: var(--vertical-nav-bar-size);`
	`229`	`+ bottom: calc(var(--vertical-nav-bar-size) + env(safe-area-inset-bottom));`
`230`	`230`	`height: 4rem;`
`231`	`231`	`}`
`232`	`232`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,6 @@`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`.discover-container {`
`27`		`- width: 100%;`
`28`	`27`	`height: 100%;`
`29`	`28`	`background-color: transparent;`
`30`	`29`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,6 @@`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.library-container {`
`23`		`- width: 100%;`
`24`	`23`	`height: 100%;`
`25`	`24`	`background-color: transparent;`
`26`	`25`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,6 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.search-container {`
`15`		`- width: 100%;`
`16`	`15`	`height: 100%;`
`17`	`16`	`background-color: transparent;`
`18`	`17`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,6 @@`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.settings-container {`
`21`		`- width: 100%;`
`22`	`21`	`height: 100%;`
`23`	`22`	`background-color: transparent;`
`24`	`23`