Use flex gaps for more consistency

src/main/frontend/components/right_sidebar.cljs

@@ -221,7 +221,7 @@
        [:div
         (toggle)]]
 
-      [:.sidebar-item-list.flex-1.scrollbar-spacing
+      [:.sidebar-item-list.flex-1.scrollbar-spacing.flex.flex-col.gap-2
        (if @*anim-finished?
          (for [[idx [repo db-id block-type]] (medley/indexed blocks)]
            (rum/with-key

src/main/frontend/components/sidebar.cljs

@@ -47,7 +47,7 @@
   [:div.nav-content-item.is-expand
    {:class class}
    [:div.nav-content-item-inner
-    [:div.header.items-center.mb-1
+    [:div.header.items-center
      {:on-click (fn [^js/MouseEvent e]
                   (let [^js target (.-target e)
                         ^js parent (.closest target ".nav-content-item")]
@@ -223,11 +223,11 @@
                    (when (some (fn [sel] (boolean (.closest target sel)))
                                [".favorites .bd" ".recent .bd" ".dropdown-wrapper" ".nav-header"])
                      (close-modal-fn)))}
-     [:div.flex.flex-col.pb-4.wrap
-      [:nav.px-4.pt-1.space-y-1 {:aria-label "Sidebar"}
+     [:div.flex.flex-col.pb-4.wrap.gap-4
+      [:nav.px-4.flex.flex-col.gap-1 {:aria-label "Sidebar"}
        (repo/repos-dropdown)
 
-       [:div.nav-header
+       [:div.nav-header.flex.gap-1.flex-col
         (if-let [page (:page default-home)]
           (sidebar-item
             {:class            "home-nav"

src/main/frontend/components/sidebar.css

@@ -92,7 +92,6 @@
   a.item {
     user-select: none;
     transition: background-color .3s;
-    margin-bottom: 2px;
 
     > .ti {
       font-size: 16px;
@@ -116,8 +115,6 @@
   }
 
   .nav-content-item {
-    margin-top: 14px;
-
     &-inner {
       border-radius: 8px;
     }
@@ -242,7 +239,7 @@
     background-color: var(--ls-secondary-background-color);
 
     > .wrap {
-      margin-top: 50px;
+      margin-top: 52px;
     }
 
     .new-page {
@@ -472,9 +469,7 @@ html[data-theme='dark'] {
   }
 
   .sidebar-item {
-    padding-top: 24px;
-    padding-bottom: 24px;
-    margin-bottom: 8px;
+    @apply p-4;
 
     .close {
       transform: scale(0.8);