fix iOS t-navbar style

src/components/PageTransition.vue

@@ -102,8 +102,8 @@ onUnmounted(() => {
 	width: 100%;
 	height: 100%;
 	display: grid;
-	min-height: 100%;
 	position: relative;
+	min-height: 100%;
 	overflow-x: hidden;
 
 	.pages {

src/layout/MainLayout.vue

@@ -184,6 +184,7 @@ const contentHeight = computed(() => {
 .main-layout {
 	--app-nav-offset: v-bind(topPadding);
 	--safe-top: env(safe-area-inset-top, 0px);
+
 	box-sizing: border-box;
 	isolation: isolate;
 	position: relative;
@@ -192,6 +193,8 @@ const contentHeight = computed(() => {
 	transition: padding-bottom .24s ease;
 
 	.nav-bar {
+		--td-navbar-padding-top: var(--safe-top);
+
 		top: 0;
 		left: 0;
 		right: 0;
@@ -199,11 +202,8 @@ const contentHeight = computed(() => {
 		position: fixed;
 
 		:deep(.t-navbar) {
-			z-index: 1;
-			position: relative;
-		}
 
-		:deep(.t-navbar__content) {
+			&__content {
 				color: var(--tui-black, #000);
 				border-bottom: 1px solid rgba(0, 0, 0, .1);
 				background: rgba(250, 250, 250, .8);
@@ -211,6 +211,13 @@ const contentHeight = computed(() => {
 				-webkit-backdrop-filter: blur(10px);
 			}
 
+			&__left,
+			&__right {
+				top: var(----td-navbar-padding-top);
+				height: var(--td-navbar-height, 48px);
+			}
+		}
+
 		.nav-extra {
 			gap: .35rem;
 			display: inline-flex;
@@ -237,9 +244,9 @@ const contentHeight = computed(() => {
 	}
 
 	.tab-bar {
-		bottom: 1rem;
 		left: 1rem;
 		right: 1rem;
+		bottom: 1rem;
 		position: fixed;
 		z-index: 1000;
 		opacity: 1;