enhance(ui): lables alignment for the page properties details

src/main/frontend/components/db_based/page.cljs

@@ -113,7 +113,7 @@
                       property? :property
                       class? :class
                       :else :page)))
-    [:div.flex.flex-col.gap-1
+    [:div.flex.flex-col.gap-1.page-configure
      (if (= mode :property)
        (property-component/property-config page {:inline-text component-block/inline-text})
        [:<>
@@ -122,7 +122,6 @@
         (when-not (or config/publishing? class?)
           (tags-row page))
         (when-not config/publishing? (icon-row page))
-        [:h2 "Properties: "]
         (page-properties page (assoc page-opts :mode mode))])]))
 
 (rum/defc page-properties-react < rum/reactive
@@ -212,13 +211,13 @@
                     [:div {:on-click util/stop-propagation}
                      (tags page)])]
                  [:div.page-info-title-placeholder])
-               [:div.flex.flex-row.items-center.gap-1
+               [:div.flex.flex-row.items-center
                 [:a.flex.fade-link.ml-3 (ui/icon "info-circle")]
                 (mode-switch types *mode)])]
             (when (or @*hover? (not collapsed?))
-              [:div.px-1.absolute.right-0.top-0
+              [:div.px-1.absolute.right-1.top-0
                (shui/button
-                 {:variant :ghost :size :sm}
+                 {:variant :ghost :size :sm :class "!px-1"}
                  (if collapsed?
                    [:span.opacity-80.flex.items-center
                     (ui/icon "adjustments-horizontal" {:size 16})]
@@ -230,5 +229,5 @@
                       (and class? (seq (:properties (:block/schema page)))))
               [:div.properties-wrap
                (page-properties page {:mode (if class? :class :page)})])
-            [:div.pt-2.configure-wrap
+            [:div.configure-wrap
              (page-configure page *mode)]))]])))

src/main/frontend/components/page.css

@@ -401,18 +401,28 @@ html.is-native-ios {
 }
 
 .page-info {
-  @apply ml-[-10px] mb-[12px] border rounded-md;
+  @apply ml-[-18px] mb-[12px] border rounded-md;
 
   &-inner {
     @apply py-2;
   }
 
   .ls-page-properties {
-    @apply bg-gray-03 rounded-md px-3 gap-1;
+    @apply bg-gray-03 rounded-md px-2.5 gap-1;
   }
 
   .configure-wrap {
-    @apply px-2;
+    @apply px-2.5 pt-1;
+  }
+
+  .page-configure {
+    > div:not(.ls-page-properties) {
+      @apply pl-[36px];
+
+      > .col-span-3 {
+        @apply relative left-[-24px];
+      }
+    }
   }
 
   .ls-new-property {
@@ -423,11 +433,15 @@ html.is-native-ios {
     @apply border-transparent mt-[-4px] -mb-[14px];
 
     &:has(.select-item) {
-      @apply py-2 relative -left-1;
+      @apply py-2 relative left-0;
 
       .info-title {
         @apply relative -top-1;
       }
+
+      .properties-wrap {
+        @apply pl-2;
+      }
     }
 
     .page-info-inner {

src/main/frontend/components/property.css

@@ -171,12 +171,6 @@ input.simple-input:focus {
     box-shadow: none;
 }
 
-.page-configure {
-    @screen md {
-        max-width: 720px;
-    }
-}
-
 .property-key .bullet-container .bullet, .ls-property-input .bullet-container .bullet {
     background-color: darkgrey;
 }