fix(mobile): timestamp submenu of toolbar

src/main/frontend/mobile/index.css

@@ -76,18 +76,18 @@
 
   button {
     @apply flex items-center py-2 px-2;
+  }
 
-    .submenu {
-      z-index: 100;
-      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
-      background-color: var(--ls-secondary-background-color);
-      overflow-x: overlay;
-      overflow-y: hidden;
-      height: 40px;
-    }
+  .submenu {
+    @apply fixed left-0 bottom-0 w-full flex-row justify-evenly items-center z-10 bg-base-2;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
+    overflow-x: overlay;
+    overflow-y: hidden;
+    height: 40px;
+    display: none;
 
-    .show-submenu {
-      display: block;
+    &.show-submenu {
+      display: flex;
     }
   }
 
@@ -245,4 +245,4 @@ html.is-zoomed-native-ios {
       }
     }
   }
-}
+}

src/main/frontend/mobile/mobile_bar.cljs

@@ -36,7 +36,7 @@
   [parent-id]
   (let [callback (fn [event]
                    (util/stop event)
-                   (let [target (.-parentNode (.-target event))]
+                   (let [target (gdom/getElement "mobile-toolbar-timestamp-submenu")]
                      (dom/remove-class! target "show-submenu")))
         command-cp (fn [action description]
                      [:button
@@ -48,10 +48,10 @@
      [:button.bottom-action
       {:on-mouse-down (fn [event]
                         (util/stop event)
-                        (let [target (gdom/getNextElementSibling (gdom/getParentElement (.-target event)))]
+                        (let [target (gdom/getElement "mobile-toolbar-timestamp-submenu")]
                           (dom/add-class! target "show-submenu")))}
       (ui/icon "calendar" {:size ui/icon-size})]
-     [:div.submenu.fixed.left-0.bottom-0.hidden.w-full.flex-row.justify-evenly.items-center
+     [:div#mobile-toolbar-timestamp-submenu.submenu
       {:style {:bottom @util/keyboard-height}}
       (command-cp #(let [today (page-handler/get-page-ref-text (date/today))]
                      (commands/simple-insert! parent-id today {}))