fix(ios): can't scroll when search results overflow with soft keyboar…

…d opened
rsrini83 · Dec 19, 2022 · ef06aed · ef06aed
1 parent 7cb8d61
commit ef06aed
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/resources/css/common.css b/resources/css/common.css
@@ -14,6 +14,7 @@
   --ls-left-sidebar-width: 246px;
   --ls-left-sidebar-sm-width: 74vw;
   --ls-left-sidebar-nav-btn-size: 38px;
+  --ls-native-kb-height: 0px;
   --ls-error-color: var(--color-red-500);
   --ls-warning-color: var(--color-orange-500);
   --ls-success-color: var(--color-green-500);

diff --git a/src/main/frontend/components/command_palette.css b/src/main/frontend/components/command_palette.css
@@ -93,8 +93,22 @@
 }
 
 html.is-ios {
+  .ui__model {
+    &[label="ls-modal-search"] {
+      .panel-content {
+        padding-bottom: 0;
+        max-height: unset;
+      }
+    }
+
+    .ls-search {
+      @apply pb-0;
+    }
+  }
+
   .cp__palette-main {
     margin-bottom: 0;
+    --palettle-container-height: calc(98vh - 8rem - var(--ls-native-kb-height));
   }
 }
 

diff --git a/src/main/frontend/components/search.css b/src/main/frontend/components/search.css
@@ -16,6 +16,14 @@
   padding-right: 12px;
 }
 
+.ls-search {
+  @apply flex flex-col overflow-auto;
+
+  > .search-results-wrap {
+    @apply flex-1 overflow-auto h-full;
+  }
+}
+
 .search-item svg {
   transform: scale(0.8);
 }

diff --git a/src/main/frontend/handler/events.cljs b/src/main/frontend/handler/events.cljs
@@ -462,6 +462,8 @@
     (when (mobile-util/native-ios?)
       (reset! util/keyboard-height keyboard-height)
       (set! (.. main-node -style -marginBottom) (str keyboard-height "px"))
+      (when-let [^js html (js/document.querySelector ":root")]
+        (.setProperty (.-style html) "--ls-native-kb-height" (str keyboard-height "px")))
       (when-let [left-sidebar-node (gdom/getElement "left-sidebar")]
         (set! (.. left-sidebar-node -style -bottom) (str keyboard-height "px")))
       (when-let [right-sidebar-node (gdom/getElementByClass "sidebar-item-list")]
@@ -482,6 +484,8 @@
     (when (= (state/sub :editor/record-status) "RECORDING")
       (state/set-state! :mobile/show-recording-bar? false))
     (when (mobile-util/native-ios?)
+      (when-let [^js html (js/document.querySelector ":root")]
+        (.removeProperty (.-style html) "--ls-native-kb-height"))
       (when-let [card-preview-el (js/document.querySelector ".cards-review")]
         (set! (.. card-preview-el -style -marginBottom) "0px"))
       (when-let [card-preview-el (js/document.querySelector ".encryption-password")]