enhance(ux): polish classic select for the property dropdown editor

src/main/frontend/components/property.css

@@ -355,6 +355,12 @@ a.control-link {
   }
 }
 
+.ui__dropdown-menu-sub-content {
+  .cp__select-main {
+    @apply -mx-4 my-0;
+  }
+}
+
 .ls-property-choices-sub-pane {
   @apply w-[220px] p-0;
 

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

@@ -137,11 +137,14 @@
           {:ref *ref
            :on-click (if disabled?
                        (constantly nil)
-                       #(shui/popup-show! (.-target %) content-fn))}
+                       #(shui/popup-show! (.-target %) content-fn {:id :ls-node-tags-sub-pane}))}
           (if (seq schema-classes)
             [:div.flex.flex-1.flex-row.items-center.flex-wrap.gap-2
+             {:class "max-w-[300px]"}
              (for [class schema-classes]
-               [:a.text-sm (str "#" (:block/title class))])]
+               [:a.text-sm (str "#" (:block/title class))])
+             [:span.opacity-60.pl-1.top-1.relative.hover:opacity-80.active:opacity-60
+              (shui/tabler-icon "edit")]]
             (pv/property-empty-btn-value))])])))
 
 (rum/defc name-edit-pane
@@ -259,7 +262,8 @@
         id2 (str "d2-" id1)
         or-close-menu-sub! (fn []
                              (when (and (not (shui-popup/get-popup :ls-icon-picker))
-                                     (not (shui-popup/get-popup :ls-base-edit-form)))
+                                     (not (shui-popup/get-popup :ls-base-edit-form))
+                                     (not (shui-popup/get-popup :ls-node-tags-sub-pane)))
                                (set-sub-open! false)
                                (restore-root-highlight-item! id1)))
         wrap-menuitem (if submenu-content

src/main/frontend/components/select.cljs

@@ -117,6 +117,7 @@
                           {:style {:margin-bottom "-2px"}}
                           [:input.cp__select-input.w-full
                            (merge {:type        "text"
+                                   :class "!p-1.5"
                                    :placeholder (or input-default-placeholder (t prompt-key))
                                    :auto-focus  true
                                    :value       @input

src/main/frontend/ui.css

@@ -23,7 +23,7 @@
       }
 
       &:hover, &.chosen {
-        background-color: var(--lx-gray-05, var(--ls-menu-hover-color, hsl(var(--secondary))));
+        background-color: var(--lx-gray-04, var(--ls-menu-hover-color, hsl(var(--secondary))));
 
         .has-help small {
           visibility: visible;