enhance(ui): polish details for the property editor

src/main/frontend/components/icon.cljs

@@ -269,15 +269,15 @@
                             (on-chosen e icon-value)
                             (shui/popup-hide! id))})))]
     ;; trigger
-    (shui/button
-      {:variant  :ghost
-       :size     :sm
-       :class    "px-1 leading-none"
-       :on-click #(when-not disabled?
-                    (shui/popup-show! % content-fn
-                      {:as-menu?      true
-                       :content-props {:class "w-auto"}}))}
-      (if icon-value
-        (icon icon-value (merge {:size 18} icon-props))
-        [:div.opacity-50.text-sm
-         "Empty"]))))
+    (let [has-icon? (not (nil? icon-value))]
+      (shui/button
+        {:variant (if has-icon? :ghost :text)
+         :size :sm
+         :class (if has-icon? "px-1 leading-none" "font-normal text-sm px-[0.5px] opacity-50")
+         :on-click #(when-not disabled?
+                      (shui/popup-show! % content-fn
+                        {:as-menu? true
+                         :content-props {:class "w-auto"}}))}
+        (if has-icon?
+          (icon icon-value (merge {:size 18} icon-props))
+          "Empty")))))

src/main/frontend/components/property/value.cljs

@@ -579,25 +579,18 @@
                       (select block property select-opts' opts)
 
                       :page
-                      (property-value-select-page block property select-opts' opts))])
-        dropdown-opts {:modal-class (util/hiccup->class
-                                     "origin-top-right.absolute.left-0.rounded-md.shadow-lg.mt-2")
-                       :initial-open? editing?}]
+                      (property-value-select-page block property select-opts' opts))])]
     (if editing?
       (select-f)
-      (ui/dropdown
-       (fn [{:keys [toggle-fn]}]
-         [:a.control-link.jtrigger
-          {:tabIndex 0
-           :on-click (if config/publishing?
-                       (constantly nil)
-                       toggle-fn)
-           :class "flex flex-1"}
-          (if (and (string/blank? value) (not editing?))
-            [:div.opacity-50.pointer.text-sm "Empty"]
-            (value-f))])
-       select-f
-       dropdown-opts))))
+      [:a.control-link.jtrigger
+       {:tabIndex 0
+        :on-click (if config/publishing?
+                    (constantly nil)
+                    #(shui/popup-show! (.-target %) select-f {:as-menu? true}))
+        :class "flex flex-1"}
+       (if (and (string/blank? value) (not editing?))
+         [:div.opacity-50.pointer.text-sm "Empty"]
+         (value-f))])))
 
 (rum/defcs property-scalar-value < rum/reactive db-mixins/query
   (rum/local nil ::ref)