enhance(ui): polish the page properties area

packages/ui/src/vars-classic.css

@@ -3,8 +3,8 @@
   --ls-tag-text-hover-opacity: 1;
   --ls-page-text-size: 1em;
   --ls-page-title-size: 36px;
-  --ls-main-content-max-width: 810px;
-  --ls-main-content-max-width-wide: 1280px;
+  --ls-main-content-max-width: 960px;
+  --ls-main-content-max-width-wide: 1440px;
   --ls-font-family: Inter;
   --ls-scrollbar-width: 6px;
   --ls-border-radius-low: 4px;

src/main/frontend/components/container.css

@@ -542,6 +542,10 @@
   width: 100%;
   max-width: var(--ls-main-content-max-width);
   flex: 1;
+
+  .page {
+    @apply px-6;
+  }
 }
 
 .cp__sidebar-help {

src/main/frontend/components/journal.css

@@ -6,7 +6,7 @@
   }
 
   .journal-item {
-    @apply border-t mx-6 px-6 min-h-[250px];
+    @apply border-t min-h-[250px];
 
     &:first-child {
       @apply pt-0 border-none min-h-[500px];

src/main/frontend/components/page.css

@@ -394,6 +394,14 @@ html.is-native-ios {
     @apply py-2;
   }
 
+  .ls-page-properties {
+    @apply bg-gray-03 rounded-md px-3 gap-1;
+  }
+
+  .ls-new-property {
+    @apply mt-1;
+  }
+
   &.is-collapsed {
     @apply border-transparent -mb-[14px];
 
@@ -403,6 +411,10 @@ html.is-native-ios {
 
     .page-info-inner {
       @apply py-0 relative -top-[14px] -mb-[16px] min-h-[44px];
+
+      &:has(.ls-page-properties) {
+        @apply mb-4 opacity-90;
+      }
     }
 
     .ls-new-property {

src/main/frontend/components/property.cljs

@@ -522,7 +522,7 @@
                          (reset! *new-property? true))}
             [:div.flex.flex-row.items-center {:style {:padding-left 1}}
              (ui/icon "plus" {:size 15})
-             [:div.ml-1.text-sm {:style {:padding-left 2}} "Add property"]]]
+             [:div.ml-1 {:style {:padding-left 2}} "Add property"]]]
 
            :else
            [:div {:style {:height 28}}]))])))

src/main/frontend/components/property.css

@@ -47,7 +47,7 @@
 }
 
 .ls-properties-area {
-    @apply grid gap-2 py-2;
+    @apply grid gap-0.5 py-2;
 
     .property-pair {
         @apply grid grid-cols-5 gap-1;