enhance: show page info border only when hovering the info title

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

@@ -162,33 +162,35 @@
         collapsed? (rum/react *collapsed?)
         has-tags? (seq (:block/tags page))
         has-properties? (seq (:block/properties page))
-        hover-or-expanded? (or @*hover? hover-title? (not collapsed?))]
+        hover-or-expanded? (or @*hover? hover-title? (not collapsed?))
+        show-info? (or hover-or-expanded? has-tags? has-properties? class?)]
     (when (if config/publishing?
             ;; Since publishing is read-only, hide this component if it has no info to show
             ;; as it creates a fair amount of empty vertical space
             (or has-tags? (some? types))
             true)
-      [:div.page-info {:on-mouse-over #(reset! *hover? true)
-                       :on-mouse-leave #(reset! *hover? false)}
-       (when (or hover-or-expanded? has-tags? has-properties? class?)
-         [:div.py-2 {:class (if (or @*hover? (not collapsed?))
-                              "border rounded"
-                              "border rounded border-transparent")}
-          [:div.info-title.cursor {:on-click
-                                   (if config/publishing?
-                                     (fn [_]
-                                       (when (seq (set/intersection #{"class" "property"} types))
-                                         (swap! *collapsed? not)))
-                                     #(swap! *collapsed? not))}
+      [:div.page-info
+       [:div.py-2 {:class (if (or @*hover? (not collapsed?))
+                            "border rounded"
+                            "border rounded border-transparent")}
+        [:div.info-title.cursor
+         {:on-mouse-over  #(reset! *hover? true)
+          :on-mouse-leave #(reset! *hover? false)
+          :on-click (if config/publishing?
+                      (fn [_]
+                        (when (seq (set/intersection #{"class" "property"} types))
+                          (swap! *collapsed? not)))
+                      #(swap! *collapsed? not))}
+         (when show-info?
            [:div.flex.flex-row.items-center.gap-2.justify-between.pl-1
             [:div.flex.flex-row.items-center.gap-2
              (if collapsed?
                (if (or has-tags? @*hover? config/publishing?)
                  [:<>
                   (if has-tags?
-                    [:div.px-1]
+                    [:div.px-1 {:style {:min-height 28}}]
                     (shui-ui/button {:variant :ghost :size :sm :class "fade-link"}
-                      (ui/icon "tags")))
+                                    (ui/icon "tags")))
                   (if (and config/publishing? (seq (set/intersection #{"class" "property"} types)))
                     [:div
                      [:div.opacity-50.pointer.text-sm "Expand for more info"]]
@@ -206,11 +208,12 @@
                {:variant :ghost :size :sm :class "fade-link"}
                (ui/icon (if collapsed?
                           "chevron-down"
-                          "chevron-up"))))]]
+                          "chevron-up"))))])]
+        (when show-info?
           (if collapsed?
             (when (or (seq (:block/properties page))
                       (and class? (seq (:properties (:block/schema page)))))
               [:div.py-2.px-4
                (page-properties page {:mode (if class? :class :page)})])
             [:div.py-2.px-4
-             (page-configure page *mode)])])])))
+             (page-configure page *mode)]))]])))

src/main/frontend/components/page.css

@@ -390,6 +390,10 @@ html.is-native-ios {
 .page-info {
     min-height: 46px;
     margin-left: -15px;
+
+    .info-title {
+        min-height: 28px;
+    }
 }
 
 .sidebar-item .page-info {