From d36683824cf8a76175c796f3a4ae6b4fd93060d5 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Wed, 8 Nov 2023 19:15:09 -0800
Subject: [PATCH] fix(pluginMaterial): fix block list can't scroll when visible
 in canvas

---
 .../src/components/container/CanvasContainer.vue       |  7 +++++--
 packages/plugins/materials/src/Main.vue                | 10 +++++++---
 packages/plugins/materials/src/component/Main.vue      |  4 +++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasContainer.vue b/packages/canvas/src/components/container/CanvasContainer.vue
index 6d0ecc6734..626887f4fc 100644
--- a/packages/canvas/src/components/container/CanvasContainer.vue
+++ b/packages/canvas/src/components/container/CanvasContainer.vue
@@ -223,16 +223,19 @@ export default {
 </script>
 <style lang="less" scoped>
 .insert-panel {
-  z-index: 1;
+  z-index: 4;
   position: fixed;
   top: 200px;
   left: 400px;
   width: 480px;
   :deep(.components-wrap) {
     & > .tiny-collapse {
-      height: 300px;
+      max-height: 300px;
     }
   }
+  :deep(#pane-blocks) {
+    max-height: 400px;
+  }
 }
 .datainit-tip {
   display: flex;
diff --git a/packages/plugins/materials/src/Main.vue b/packages/plugins/materials/src/Main.vue
index 2af05f7709..3239ecb9d8 100644
--- a/packages/plugins/materials/src/Main.vue
+++ b/packages/plugins/materials/src/Main.vue
@@ -90,7 +90,10 @@ export default {
 
 <style lang="less" scoped>
 .tiny-tabs {
-  height: calc(100% - 48px);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
 }
 
 :deep(.tiny-tabs__header) {
@@ -98,7 +101,8 @@ export default {
 }
 
 :deep(.tiny-tabs__content) {
-  height: calc(100% - 48px);
+  flex: 1;
+  overflow-y: scroll;
   padding: 0;
   & > div {
     height: 100%;
@@ -106,7 +110,7 @@ export default {
 }
 
 .tiny-collapse {
-  height: calc(100% - 56px);
+  flex: 1;
   overflow-y: scroll;
 }
 </style>
diff --git a/packages/plugins/materials/src/component/Main.vue b/packages/plugins/materials/src/component/Main.vue
index 5a53125ac3..fc8f6f670e 100644
--- a/packages/plugins/materials/src/component/Main.vue
+++ b/packages/plugins/materials/src/component/Main.vue
@@ -117,6 +117,8 @@ export default {
 <style lang="less" scoped>
 .components-wrap {
   height: 100%;
+  display: flex;
+  flex-direction: column;
 
   .tiny-search {
     padding: 12px 8px;
@@ -164,7 +166,7 @@ export default {
   }
 
   .tiny-collapse {
-    height: calc(100% - 56px);
+    flex: 1;
     overflow-y: scroll;
     .tiny-collapse-item.is-active + .tiny-collapse-item {
       margin-top: 0;