enhance(mobile): tweak settings css

src/main/frontend/components/settings.css

@@ -68,8 +68,8 @@
     > article {
       flex: 1;
       padding: 0 12px 12px;
-      max-height: 70vh;
-      overflow: auto;
+      max-height: 80vh;
+      /* overflow: auto; */
     }
 
     .panel-wrap {

src/main/frontend/ui.cljs

@@ -290,6 +290,7 @@
     (when (util/safari?) (.add cl "is-safari"))
     (when (mobile-util/native-ios?) (.add cl "is-native-ios"))
     (when (mobile-util/native-android?) (.add cl "is-native-android"))
+    (when (mobile-util/native-iphone?) (.add cl "native-iphone"))
     (when (util/electron?)
       (js/window.apis.on "full-screen" #(js-invoke cl (if (= % "enter") "add" "remove") "is-fullscreen"))
       (p/then (ipc/ipc :getAppBaseInfo) #(let [{:keys [isFullScreen]} (js->clj % :keywordize-keys true)]
@@ -568,11 +569,7 @@
                    (state/close-settings!))
         modal-panel-content (or modal-panel-content (fn [close] [:div]))]
     [:div.ui__modal
-     {:style {:z-index (if show? 9999 -1)
-              :top (when (or (mobile-util/native-iphone?)
-                             (mobile-util/native-android?)
-                             (and (util/mobile?) (util/ios?)))
-                     "22vh")}}
+     {:style {:z-index (if show? 9999 -1)}}
      (css-transition
       {:in show? :timeout 0}
       (fn [state]

src/main/frontend/ui.css

@@ -129,6 +129,14 @@
   }
 }
 
+html.is-native-andorid
+html.is-native-iphone
+{
+    .ui__modal {
+        top: 15vh;
+    }
+}
+
 html.is-mobile {
   .ui__modal {
     @apply bottom-0 inset-x-0;
@@ -247,3 +255,4 @@ html.is-mobile {
 .rotating-arrow svg {
   transition: all 100ms ease-in 0ms;
 }
+