enhance(mobile): env safe area for ios

src/main/mobile/components/app.css

@@ -7,7 +7,7 @@
   --ls-page-title-size: 26px;
   --silk-topbar-inner-height: 32px;
   --silk-tabbar-bottom-paddding: 12px;
-  --silk-100-lvh-dvh-pct: max(100%,100vh);
+  --silk-100-lvh-dvh-pct: max(100%, 100vh);
   --safe-area-inset-top: 40px;
   --safe-area-inset-bottom: 16px;
 }
@@ -25,6 +25,14 @@ html.is-native-android {
 
   --silk-tabbar-bottom-paddding: 28px;
 
+  .app-silk-index-container {
+    padding-top: calc(var(--safe-area-inset-top) + var(--silk-topbar-inner-height) + 22px);
+  }
+
+  .app-silk-topbar {
+    padding-top: calc(var(--safe-area-inset-top) + var(--silk-topbar-inner-padding-top));
+  }
+
   .app-silk-search-page {
     > .hd {
       padding-top: calc(var(--safe-area-inset-top) + 14px);
@@ -164,7 +172,8 @@ ul {
     }
   }
 
-  .app-silk-depth-sheet-content {}
+  .app-silk-depth-sheet-content {
+  }
 
   .app-silk-scroll-content {
     @apply min-h-screen;
@@ -220,7 +229,7 @@ ul {
       &:last-child {
         @apply -mb-4;
 
-        padding-bottom: calc(var(--safe-area-inset-bottom) + 6px);
+        padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
       }
     }
   }
@@ -363,7 +372,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
     --silk-topbar-inner-height: 2px;
   }
 
-  padding-top: calc(var(--safe-area-inset-top, 0px) + var(--silk-topbar-inner-height) + 22px);
+  padding-top: calc(env(safe-area-inset-top) + var(--silk-topbar-inner-height) + 22px);
   padding-bottom: 120px;
 
   #journals {
@@ -374,6 +383,12 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
 .app-silk-topbar {
   @apply fixed top-0 left-0 w-full flex justify-between items-center overflow-hidden bg-gray-01;
 
+  padding-top: calc(env(safe-area-inset-top) + var(--silk-topbar-inner-padding-top, 2px));
+  height: var(--silk-topbar-inner-height, 32px);
+
+  padding-bottom: var(--silk-topbar-inner-padding-bottom, 8px);
+  box-sizing: content-box;
+
   &[data-center-title] {
     @apply grid grid-cols-8 gap-4;
 
@@ -382,12 +397,6 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
     }
   }
 
-  padding-top: calc(var(--safe-area-inset-top, 0px) + var(--silk-topbar-inner-padding-top, 2px));
-  height: var(--silk-topbar-inner-height, 32px);
-
-  padding-bottom: var(--silk-topbar-inner-padding-bottom, 8px);
-  box-sizing: content-box;
-
   &.search {
     @apply hidden;
   }
@@ -415,7 +424,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
   bg-gray-02 absolute left-0 -bottom-0 w-full z-[1] dark:bg-gray-01;
 
   padding-top: 6px;
-  padding-bottom: calc(var(--safe-area-inset-bottom) + var(--silk-tabbar-bottom-paddding));
+  padding-bottom: calc(env(safe-area-inset-bottom) + var(--silk-tabbar-bottom-paddding));
 
   > .as-item {
     @apply flex flex-1 flex-col items-center pb-1 transition-opacity;
@@ -439,7 +448,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
   > .hd {
     @apply fixed top-0 left-0 px-4 py-2.5 w-full bg-gray-01;
 
-    padding-top: calc(var(--safe-area-inset-top, 0px) + 4px);
+    padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
     z-index: 1;
     transition: padding 0.1s ease-in-out;
 
@@ -540,14 +549,14 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
 }
 
 .Sidebar-hidden {
-    @apply bg-transparent dark:bg-transparent;
-    box-shadow: none;
+  @apply bg-transparent dark:bg-transparent;
+  box-shadow: none;
 }
 
 #app-main-content {
-    padding-bottom: 200px;
+  padding-bottom: 200px;
 }
 
 .menu-link, .cp__repos-quick-actions .ui__button {
-    @apply text-base;
+  @apply text-base;
 }