fix: align bullets for new property

src/main/frontend/components/page.cljs

@@ -532,17 +532,18 @@
     [:div.ls-page-properties.mb-4 {:style {:padding 2}}
      (let [edit-input-id-prefix (str "edit-block-" (:block/uuid page))]
        (if (and configure? class?)
-         [:div
+         [:<>
           [:div.text-sm.opacity-70.font-medium.mb-2 "Properties:"]
           (component-block/db-properties-cp {:editor-box editor/box}
                                             page
                                             (str edit-input-id-prefix "-page")
                                             (assoc opts :class-schema? false))
-          [:div.text-sm.opacity-70.font-medium.mb-2 "Class Properties:"]
+          [:div.text-sm.opacity-70.font-medium.mt-4.mb-2 "Class Properties:"]
+          [:div
            (component-block/db-properties-cp {:editor-box editor/box}
                                             page
                                             (str edit-input-id-prefix "-schema")
-                                            (assoc opts :class-schema? true))]
+                                            (assoc opts :class-schema? true))]]
          (component-block/db-properties-cp {:editor-box editor/box}
                                            page
                                            (str edit-input-id-prefix "-page")

src/main/frontend/components/property.cljs

@@ -230,7 +230,7 @@
 (rum/defcs property-input < rum/reactive
   (rum/local false ::show-new-property-config?)
   shortcut/disable-all-shortcuts
-  [state entity *property-key *property-value {:keys [class-schema? page-configure?]
+  [state entity *property-key *property-value {:keys [class-schema? page-configure? in-block-container?]
                                                :as opts}]
   (let [repo (state/get-current-repo)
         *show-new-property-config? (::show-new-property-config? state)
@@ -247,10 +247,14 @@
         exclude-properties (set/union exclude-properties* (set (map string/lower-case exclude-properties*)))
         properties (->> (search/get-all-properties)
                         (remove exclude-properties))]
+    [:div.ls-property-input.flex.flex-1.flex-row.items-center.flex-wrap.gap-1
+     (if in-block-container? {:style {:padding-left 22}} {})
      (if @*property-key
        (when-let [property (get-property-from-db @*property-key)]
-        [:div.ls-property-add.grid.grid-cols-5.gap-1.flex.flex-row.items-center
-         [:div.col-span-2 @*property-key]
+         [:div.ls-property-add.grid.grid-cols-5.gap-1.flex.flex-1.flex-row.items-center
+          [:div.flex.flex-row.items-center.col-span-2
+           [:span.bullet-container.cursor [:span.bullet]]
+           [:div.ml-1 @*property-key]]
           [:div.col-span-3.flex.flex-row
            (when (not (and class-schema? page-configure?))
              (if @*show-new-property-config?
@@ -267,7 +271,9 @@
                                "origin-top-right.absolute.left-0.rounded-md.shadow-lg.mt-2")})
                (pv/property-scalar-value entity property @*property-value (assoc opts :editing? true))))]])
 
-      [:div.ls-property-add.h-6
+       [:div.ls-property-add.flex.flex-row.items-center
+        [:span.bullet-container.cursor [:span.bullet]]
+        [:div.ml-1 {:style {:height "1.5em"}} ; TODO: ugly
          (select/select {:items (map (fn [x] {:value x}) properties)
                          :dropdown? true
                          :show-new-when-not-exact-match? true
@@ -282,7 +288,7 @@
                                         (case (util/ekey e)
                                           "Escape"
                                           (pv/exit-edit-property)
-                                        nil))}})])))
+                                          nil))}})]])]))
 
 (rum/defcs new-property < rum/reactive
   (rum/local nil ::property-key)
@@ -295,7 +301,7 @@
       :node (js/document.getElementById "edit-new-property")
       :outside? false)))
   [state block edit-input-id properties new-property? opts]
-  [:div.ls-new-property.py-1
+  [:div.ls-new-property
    (let [*property-key (::property-key state)
          *property-value (::property-value state)]
      (cond

src/main/frontend/components/property.css

@@ -24,13 +24,17 @@
 
 .ls-page-properties > .ls-properties-area {
     margin-left: -22px;
+
+    .ls-new-property {
+        margin-left: 22px;
+    }
 }
 
 .ls-block .ls-properties-area {
     margin-left: 0;
 }
 
-.property-pair, .property-block .property-value, .ls-page-properties > .ls-properties-area .ls-new-property {
+.ls-block .property-pair, .property-block .property-value {
     padding-left: 22px;
 }
 
@@ -43,7 +47,7 @@
 
     .property-pair {
         @apply grid grid-cols-5 gap-1;
-        grid-template-columns: repeat(auto-fit, 120px);
+        /* grid-template-columns: repeat(auto-fit, 120px); */
     }
 
     .add-button-link {
@@ -124,7 +128,7 @@ input.simple-input:focus {
     }
 }
 
-.property-key .bullet-container .bullet {
+.property-key .bullet-container .bullet, .ls-property-input .bullet-container .bullet {
     background-color: darkgrey;
 }
 
@@ -166,6 +170,16 @@ input.simple-input:focus {
     }
 }
 
+.ls-property-add {
+    .cp__select-input {
+        padding: 0;
+    }
+}
+
+.ls-property-input {
+    min-height: 1.5em;
+}
+
 .page-title .page-tags {
     font-size: 1em;
     font-weight: 400;