Add custom scroll-into-view for tree items with smooth positioning and improve sidebar panel collapse animations with flex-based layout transitions

frontend/style.css

@@ -314,6 +314,17 @@ a:hover {
   flex-shrink: 0;
 }
 
+.sidebar.vault-collapsed .tag-cloud-section {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.sidebar.tag-collapsed .sidebar-tree {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 /* --- Sidebar filter --- */
 .sidebar-filter {
   padding: 10px 12px;
@@ -347,9 +358,11 @@ a:hover {
 
 .sidebar-tree {
   flex: 1;
-  overflow-y: auto;
+  overflow: hidden;
   padding: 12px 0;
   min-height: 80px;
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar-tree::-webkit-scrollbar {
@@ -396,7 +409,29 @@ a:hover {
 }
 
 .sidebar-panel-content.collapsed {
-  display: none;
+  max-height: 0 !important;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.sidebar-panel-content {
+  min-height: 0;
+  overflow: hidden;
+  opacity: 1;
+  transition: max-height 340ms ease, opacity 220ms ease;
+}
+
+#vault-panel-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  max-height: 1000px;
+  scroll-behavior: smooth;
+}
+
+#tag-panel-content {
+  max-height: 320px;
 }
 
 .tree-item {
@@ -446,6 +481,7 @@ a:hover {
 
 .tree-children {
   padding-left: 16px;
+  overflow: hidden;
 }
 
 .tree-children.collapsed {
@@ -476,14 +512,18 @@ a:hover {
   height: 180px;
   min-height: 60px;
   max-height: 400px;
-  overflow-y: auto;
+  overflow: hidden;
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  transition: height 340ms ease, min-height 340ms ease, max-height 340ms ease, flex 340ms ease;
 }
 .tag-cloud-section.collapsed-panel {
   height: auto;
   min-height: 0;
   max-height: none;
   overflow: hidden;
+  flex: 0 0 auto;
 }
 .tag-cloud-section::-webkit-scrollbar {
   width: 6px;
@@ -510,6 +550,11 @@ a:hover {
   padding: 0 16px 12px;
 }
 
+.tag-cloud-section:not(.collapsed-panel) #tag-panel-content {
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+
 .tag-item {
   display: inline-block;
   padding: 2px 8px;
@@ -1281,6 +1326,14 @@ body.resizing-v {
     min-height: 80px;
   }
 
+  #vault-panel-content {
+    max-height: none;
+  }
+
+  #tag-panel-content {
+    max-height: none;
+  }
+
    .help-content {
      padding: 20px 16px 28px;
    }