enhance(ux): improve checkbox interaction for the block property value

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

@@ -743,14 +743,14 @@
           :checkbox
           (let [add-property! (fn []
                                 (<add-property! block (:db/ident property) (boolean (not value))))]
-            (shui/checkbox {:class "jtrigger flex flex-row items-center"
-                            :disabled config/publishing?
-                            :checked value
-                            :auto-focus true
-                            :on-checked-change add-property!
-                            :on-key-down (fn [e]
-                                           (when (= (util/ekey e) "Enter")
-                                             (add-property!)))}))
+            [:label.flex.w-full.as-scalar-value-wrap.cursor-pointer
+             (shui/checkbox {:class "jtrigger flex flex-row items-center"
+                             :disabled config/publishing?
+                             :checked value
+                             :on-checked-change add-property!
+                             :on-key-down (fn [e]
+                                            (when (= (util/ekey e) "Enter")
+                                              (add-property!)))})])
         ;; :others
           [:div.flex.flex-1
            (if editing?

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

@@ -1,10 +1,12 @@
-.property-value-inner:hover {
+.property-value-inner {
+  &:hover, .as-scalar-value-wrap:hover {
     @apply bg-gray-02 rounded transition-[background-color] duration-300;
+  }
 }
 
 .ls-property-dialog {
-    .ls-property-key {
-        @apply overflow-y-hidden;
-        height: 286px;
-    }
+  .ls-property-key {
+    @apply overflow-y-hidden;
+    height: 286px;
+  }
 }