fix(pluginMaterial): fix block list can't scroll when visible in canvas (#77)

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;

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>

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;