fix(mobile): safe area

tiensonqin · tiensonqin · commit 892c6c32e7b0 · 2025-12-06T02:49:48.000+08:00
diff --git a/resources/mobile/index.html b/resources/mobile/index.html
@@ -2,7 +2,7 @@
 <html lang="en" data-color="logseq">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no">
     <link href="./css/style.css" rel="stylesheet" type="text/css">
     <title>Logseq: A privacy-first platform for knowledge management and collaboration</title>
 </head>
diff --git a/src/main/frontend/components/repo.cljs b/src/main/frontend/components/repo.cljs
@@ -227,7 +227,8 @@
      (when-not (util/capacitor?)
        [:h1.title (t :graph/all-graphs)])
 
-     [:div.pl-1.content.mt-8
+     [:div.pl-1.content
+      {:class (when-not (util/mobile?) "mt-8")}
       (when-not (util/mobile?)
         [:div.flex.flex-row.my-8
          [:div.mr-8
diff --git a/src/main/mobile/components/app.cljs b/src/main/mobile/components/app.cljs
@@ -31,8 +31,7 @@
 (rum/defc journals
   []
   (ui-component/classic-app-container-wrap
-   [:div.pt-6
-    (journal/all-journals)]))
+   (journal/all-journals)))
 
 (rum/defc home-inner < rum/static
   [db-restoring?]
@@ -92,8 +91,7 @@
   {:did-mount (fn [state]
                 (p/do!
                  (editor-handler/quick-add-ensure-new-block-exists!)
-                 ;; (editor-handler/quick-add-open-last-block!)
-                 )
+                 (editor-handler/quick-add-open-last-block!))
                 state)}
   []
   (quick-add/quick-add))
@@ -143,9 +141,7 @@
        (when-let [element (util/app-scroll-container-node)]
          (common-handler/listen-to-scroll! element)))
      [])
-    [:div.h-full {:class (if (contains? #{"search"} tab)
-                           "mt-20"
-                           "mt-24")}
+    [:div.h-full
      (mobile-header/header current-repo tab)
      (main-content tab route-match)]))
 
@@ -162,7 +158,7 @@
         show-popup? (and open? content-fn)
         fold-button-on-right? (state/enable-fold-button-right?)
         route-match (state/sub :route-match)]
-    [:main.w-full.h-full
+    [:div#app-main.w-full.h-full
      {:class (util/classnames
               [{:ls-fold-button-on-right fold-button-on-right?}])}
      [:div.w-full.h-full {:class (when show-popup? "invisible")}
diff --git a/src/main/mobile/components/app.css b/src/main/mobile/components/app.css
@@ -6,21 +6,19 @@
 :root {
   --ls-mobile-font-scale: 1;
   --ls-page-title-size: calc(26px * var(--ls-mobile-font-scale, 1));
-  --safe-area-inset-top: 40px;
-  --safe-area-inset-bottom: 16px;
   --ls-mobile-font-size: 16px;
 }
 
-html.is-native-ios {
-  --safe-area-inset-top: 58px;
-  --safe-area-inset-bottom: 24px;
-}
-
 html.is-native-ios,
 html.is-ios {
   font-size: calc(var(--ls-mobile-font-size) * var(--ls-mobile-font-scale, 1));
 }
 
+#app-main {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
 html.is-native-ios body,
 html.is-native-ios textarea,
 html.is-native-ios input,
@@ -49,7 +47,7 @@ html.has-mobile-keyboard {
   }
 
   .app-popup, #main-content-container, #app-main-home {
-    padding-bottom: calc(var(--ls-native-kb-height, 0px) + 160px);
+    padding-bottom: calc(var(--ls-native-kb-height, 0px) + 32px);
   }
 }
 
@@ -311,7 +309,8 @@ body, #root {
     height: 100%;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-    padding-bottom: 160px;
+    padding-top: 0px;
+    padding-bottom: 64px;
 }
 
 .cp__select-main, .cp__emoji-icon-picker, .ls-property-key {
diff --git a/src/main/mobile/components/favorites.cljs b/src/main/mobile/components/favorites.cljs
@@ -6,7 +6,7 @@
 (rum/defc favorites
   []
   [:div.left-sidebar-inner
-   [:div.sidebar-contents-container.mt-2
+   [:div.sidebar-contents-container
     {:class "!gap-4"}
     (app-left-sidebar/sidebar-favorites)
     (app-left-sidebar/sidebar-recent-pages)]])
diff --git a/src/main/mobile/components/graphs.cljs b/src/main/mobile/components/graphs.cljs
@@ -6,5 +6,4 @@
 (rum/defc page < rum/reactive
   []
   [:div.app-index-graphs
-   [:div.mt-8
-    (repo/repos-cp)]])
+   (repo/repos-cp)])
diff --git a/src/main/mobile/components/header.cljs b/src/main/mobile/components/header.cljs
@@ -143,8 +143,7 @@
 (defn- configure-native-top-bar!
   [repo {:keys [tab title route-name route-view sync-color favorited?]}]
   (when (mobile-util/native-ios?)
-    (let [hidden? (and (contains? #{"search"} tab)
-                       (not= route-name :page))
+    (let [hidden? false
           rtc-indicator? (and repo
                               (ldb/get-graph-rtc-uuid (db/get-db))
                               (user-handler/logged-in?))
@@ -219,14 +218,14 @@
                              (:block/title block)
                              (= tab "home")
                              short-repo-name
+                             (= tab "search")
+                             "Search"
                              :else
                              (string/capitalize tab))]
            (configure-native-top-bar!
             current-repo
             {:tab tab
              :title title
-             :hidden? (and (= tab "search")
-                           (not= route-name :page))
              :route-name route-name
              :route-view route-view
              :sync-color sync-color
diff --git a/src/main/mobile/components/search.cljs b/src/main/mobile/components/search.cljs
@@ -59,7 +59,7 @@
      (when (and (string/blank? input) (seq recents))
        [:div
         [:div.px-2.font-medium.text-muted-foreground
-         [:div.flex.flex-item.items-center.justify-between.mt-2
+         [:div.flex.flex-item.items-center.justify-between
           "Recent"
           (shui/button
            {:variant :text
diff --git a/src/main/mobile/deeplink.cljs b/src/main/mobile/deeplink.cljs
@@ -3,7 +3,6 @@
   (:require [clojure.string :as string]
             [frontend.config :as config]
             [frontend.db.async :as db-async]
-            [frontend.handler.editor :as editor-handler]
             [frontend.handler.notification :as notification]
             [frontend.handler.route :as route-handler]
             [frontend.mobile.intent :as intent]
diff --git a/src/main/mobile/routes.cljs b/src/main/mobile/routes.cljs
@@ -10,7 +10,7 @@
    ["/page/:name"
     {:name :page
      :view (fn [route-match]
-             [:div.ls-mobile-page.pt-8
+             [:div.ls-mobile-page
               (page/page-cp (assoc route-match :mobile-page? true))])}]
    ["/import"
     {:name :import
