enhance(ux): put block tags below block content on mobile

src/main/frontend/components/block.cljs

@@ -2692,12 +2692,11 @@
   (let [*hover? (::hover? state)
         *hover-container? (::hover-container? state)
         private-tag? (ldb/private-tags (:db/ident tag))]
-    [:div.block-tag.items-center.relative
+    [:div.block-tag
      {:key (str "tag-" (:db/id tag))
-      :class (if @*hover?
-               (str "bg-gray-03 rounded "
-                    (if private-tag? "px-1" "pr-1"))
-               "pl-2 pr-1")
+      :class (str (when private-tag? "private-tag ")
+                  (when @*hover?
+                    (if private-tag? "!px-1" "!pl-0")))
       :on-mouse-over #(reset! *hover-container? true)
       :on-mouse-out #(reset! *hover-container? false)}
      [:div.flex.items-center
@@ -3075,9 +3074,9 @@
       :data-node-type (some-> (:logseq.property.node/display-type block) name)}
      (when (and db-based? (not table?)) (block-positioned-properties config block :block-left))
      [:div.block-content-or-editor-inner
-      [:div.flex.flex-1.flex-row.gap-1.items-center
+      [:div.block-row.flex.flex-1.flex-row.gap-1.items-center
        (if (and editor-box edit? (not type-block-editor?))
-         [:div.editor-wrapper.flex.flex-1
+         [:div.editor-wrapper.flex.flex-1.w-full
           {:id editor-id
            :class (util/classnames [{:opacity-50 (boolean (or (ldb/built-in? block) (ldb/journal? block)))}])}
           (ui/catch-error
@@ -3118,7 +3117,7 @@
             (block-refs-count block refs-count *hide-block-refs?))])
 
        (when-not (:table-block-title? config)
-         [:div.flex.flex-row.items-center.self-start.gap-1
+         [:div.ls-block-right.flex.flex-row.items-center.self-start.gap-1
           (when (and db-based? (not table?))
             [:div.opacity-70.hover:opacity-100
              (block-positioned-properties config block :block-right)])

src/main/frontend/components/block.css

@@ -69,14 +69,8 @@
 
 .block-content-or-editor-wrap {
   @apply flex flex-1 flex-row flex-wrap gap-1;
-  container-type: inline-size;
 }
 
-@container (max-width: 600px) {
-    .time-spent, .positioned-properties.block-right {
-        display: none;
-    }
-}
 .block-content-or-editor-inner {
   @apply flex flex-1 flex-col w-full pr-1;
 }
@@ -546,12 +540,40 @@
 
 .ls-block {
   @apply flex-1 relative py-0.5 transition-[background-color] mx-auto;
+  container-type: inline-size;
 
   &.selected {
     @apply rounded;
   }
 }
 
+#main-content-container, #right-sidebar {
+    container-type: inline-size;
+}
+
+@container (max-width: 600px) {
+    .time-spent, .positioned-properties.block-right, .view-actions, .ls-page-title .block-tags {
+        display: none;
+    }
+
+    .block-row {
+        @apply flex-col gap-0;
+    }
+
+    .ls-block-right {
+        @apply gap-0 -ml-1;
+    }
+    .ls-page-title .ls-block-right {
+        @apply ml-0;
+    }
+}
+
+@container (max-width: 370) {
+    .ls-properties-area {
+        display: none;
+    }
+}
+
 .ls-block h1,
 .editor-inner .h1.uniline-block {
   font-size: 2rem;
@@ -998,7 +1020,15 @@ html.is-mac {
 }
 
 .block-tag {
-  @apply flex flex-row items-center;
+  @apply flex relative pl-2 pr-1;
+}
+
+.block-tag.private-tag {
+  @apply pl-1;
+}
+
+.block-tag:hover {
+  @apply bg-gray-03 rounded;
 }
 
 .block-tag a.tag {