diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less
index e76192fbb..e33f40ec1 100644
--- 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
index 2be5ccf35..1861ccd97 100644
--- 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
index 99e59be93..8cd70a29b 100644
--- 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
index 7745cc120..ce1c9a3bc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
-
+
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 2f485c221..1cd3183cd 100644
--- 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
index b949d8689..b0ee2b926 100644
--- 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
index e0b6706d3..dcc184a25 100644
--- 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
index 87062fb9b..10ae87771 100644
--- 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
index e609b4bb4..a5a90fd11 100644
--- 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
index 6ee49d356..b6f6fb360 100644
--- 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
index 5ba96d442..0c654df08 100644
--- 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;